bonus-ui/src/views/screen/wsScreen/components/right/EquipItemMore.vue

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="36%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">{{ title }}</div>

        <div ref="category" style="height: 600px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatByTypeAndAgeByUsageRateApi, getStatByTypeAndAgeByTurnoverRateApi } from '@/api/wsScreen'

export default {
  // props: {
  //   title: {
  //     type: String,
  //     default: '',
  //   },
  //   dlgParams: {
  //     type: Object,
  //     default: () => {},
  //   },
  // },
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      title: '',
      unit: '',
      categories: [],
      line: [], // 线路
      substation: [], // 变电
      cable: [], // 电缆
    }
  },
  methods: {
    openDialog(type) {
      if (type == 1) {
        this.title = '装备在用率'
        this.unit = '%'
      } else {
        this.title = '装备周转率'
        this.unit = '次'
      }
      this.dialogVisible = true
      this.getInfo(type)
    },
    async getInfo(type) {
      try {
        let res = null
        if (type == 1) {
          res = await getStatByTypeAndAgeByUsageRateApi()
        } else {
          res = await getStatByTypeAndAgeByTurnoverRateApi()
        }
        if (!res.data || res.data.length == 0) return
        this.categories = res.data.map((item) => item.month)
        this.line = res.data.map((item) => item.lineCount)
        this.substation = res.data.map((item) => item.substationCount)
        this.cable = res.data.map((item) => item.cableCount)
        this.$nextTick(() => {
          this.initLineChart()
        })
      } catch (error) {
        console.log('🚀 ~ getInfo ~ error:', error)
      }
    },
    initLineChart() {
      const chartDom = this.$refs.category
      if (!chartDom) return

      const myChart = echarts.init(chartDom)

      const categories = this.categories

      // 三条折线的假数据
      const data1 = this.line
      const data2 = this.substation
      const data3 = this.cable

      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['线路', '变电', '电缆'],
          textStyle: { color: '#fff' },
          top: 10,
          right: 10,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: categories,
          axisLine: { lineStyle: { color: '#ccc' } },
          splitLine: { show: false },
        },
        yAxis: {
          type: 'value',
          name: `单位：${this.unit}`,
          axisLine: { show: false },
          splitLine: { show: false },
        },
        series: [
          {
            name: '线路',
            data: data1,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#4facfe' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 90, 170, 0.8)' },
                { offset: 1, color: 'rgba(0, 180, 255, 0.05)' },
              ]),
            },
          },
          {
            name: '电缆',
            data: data3,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#43e97b' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 140, 0, 0.8)' },
                { offset: 1, color: 'rgba(255, 200, 0, 0.05)' },
              ]),
            },
          },
          {
            name: '变电',
            data: data2,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#ffae00' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 150, 80, 0.8)' },
                { offset: 1, color: 'rgba(0, 255, 130, 0.05)' },
              ]),
            },
          },
        ],
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => myChart.resize())
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../../img/right-dialog.png');
  background-size: 100% 100%;
  color: #fff;
  height: 700px;
}
::v-deep .el-dialog__header {
  display: none;
}
.table-container {
  color: #fff;
  background-color: #04112a80;
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../../img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>