初次提交

src/views/new-screen-zz/components/right-top.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="right-top-warp">
+    <item title="集团收益">
+      <div class="box">
+        <div class="button-box">
+          <el-tabs
+            v-model="activeName"
+            tab-position="top"
+            @tab-click="handleClick"
+          >
+            <el-tab-pane label="近30天" name="day" />
+            <el-tab-pane label="月度" name="month" />
+            <el-tab-pane label="年度" name="year" />
+          </el-tabs>
+        </div>
+        <div class="chart-box">
+          <dv-loading v-if="loading">Loading...</dv-loading>
+          <Chart v-else :options="options" />
+        </div>
+      </div>
+    </item>
+  </div>
+</template>
+
+<script>
+import item from './item-warp.vue'
+import { GetIncomeCurve } from '@/api/screen/zzScreen'
+export default {
+  components: { item },
+  props: {},
+
+  data() {
+    return {
+      loading: false,
+      options: {},
+      deptId: null,
+      type: 'day',
+      activeName: 'day'
+    }
+  },
+
+  mounted() {
+    // this.getData()
+  },
+  methods: {
+    handleClick() {
+      this.getData(this.deptId)
+    },
+
+    async getData(deptId) {
+      this.deptId = deptId
+      try {
+        this.loading = true
+        const { data } = await GetIncomeCurve({ type: this.activeName, deptId: deptId })
+        this.initChart(data)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    initChart(val) {
+      if (val.length) {
+        const x_data = []
+        const profit_data = []
+        val.forEach((el) => {
+          x_data.push(el.time)
+          profit_data.push(el.profit)
+        })
+        this.options = {
+          // backgroundColor: '#072685',
+          grid: {
+            left: '10%',
+            top: '15%',
+            right: '5%',
+            bottom: '10%'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: [
+            {
+              data: x_data,
+              axisLabel: {
+                textStyle: {
+                  color: '#6E7174'
+                },
+                margin: 10 // 刻度标签与轴线之间的距离。
+              },
+
+              axisLine: {
+                show: false // 不显示x轴
+              },
+              axisTick: {
+                show: false // 不显示刻度
+              },
+              boundaryGap: true,
+              splitLine: {
+                show: false,
+                width: 0.08,
+                lineStyle: {
+                  type: 'solid',
+                  color: '#03202E'
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '万元',
+              nameTextStyle: {
+                color: '#6E7174',
+                fontSize: 12,
+                padding: [0, 0, 0, -40]
+              },
+
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#eee',
+                  type: 'solid'
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                textStyle: {
+                  color: '#6E7174'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '收益',
+              type: 'line',
+              data: profit_data,
+              smooth: true,
+              symbolSize: 5,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(245, 209, 164, 1)' // 折线点的颜色
+                }
+              },
+              lineStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(245, 209, 164, 1)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(236, 168, 80, 1)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+                },
+                // shadowColor: 'rgba(255, 120, 0,1)',
+                shadowBlur: 8
+              }
+            }
+          ]
+        }
+      } else {
+        this.options = {
+          title: {
+            text: '暂无数据',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              fontSize: 14,
+              color: 'rgb(153, 153, 153)',
+              fontWeight: 'normal'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-top-warp {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .box {
+    width: 100%;
+    height: 100%;
+    .button-box {
+      width: 100%;
+      height: 25px;
+      padding-top: 5px;
+      text-align: right;
+    }
+    .chart-box {
+      height: calc(100% - 25px);
+      width: 100%;
+    }
+  }
+  ::v-deep .el-tabs {
+    height: 100% !important;
+  }
+  ::v-deep .el-tabs__header {
+    height: 100% !important;
+  }
+  ::v-deep .el-tabs__nav-wrap {
+    height: 100% !important;
+  }
+  ::v-deep .el-tabs__nav-scroll {
+    height: 100% !important;
+    display: flex;
+    justify-content: right;
+  }
+  ::v-deep .el-tabs__nav {
+    transform: translate(0, -12px) !important;
+  }
+  ::v-deep .el-tabs__active-bar {
+    bottom: -15px !important;
+    height: 6px !important;
+    transform: skewX(-45deg);
+  }
+  ::v-deep .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  ::v-deep .el-tabs__item {
+    padding: 0 10px !important;
+  }
+}
+</style>