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

<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>