IIoT/src/views/bigScreen/home/components/SensorStatusCircle.vue

<template>
  <div class="item sensor-status-chart-circle">
    <div class="title">
      <span class="name">传感器状态<span class="number" style="padding-left:10px;">{{ total }}</span></span>
      <!-- <span class="detail" @click="linkTo">详情>></span> -->
    </div>
    <div class="container">
      <div v-if="status" id="sensor-status-chart-circle" />
      <div class="legend">
        <div v-for="(legend,index) in option.series" :key="index" class="legend-item">
          <div class="lable">{{ legend.name }}</div>
          <div class="number" :style="{background: `linear-gradient(90deg, #021a34 0%, ${legend.data[0].itemStyle.color} 100%)`}">
            <span>{{ legend.data[0].value }}</span>
            <span class="unit">台</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'SensorStatusCircle',
  data() {
    return {
      myChart: null,
      status: true,
      total: '',
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '正常',
            type: 'pie',
            selectedMode: 'single',
            radius: ['65%', '70%'],
            center: ['25%', '50%'],
            clockWise: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '正常', itemStyle: { color: '#2affff' }},
              { value: 0, name: '其他', itemStyle: { color: '#021a34' }}
            ]
          },
          {
            name: '一般报警',
            type: 'pie',
            clockWise: false,
            selectedMode: 'single',
            radius: ['55%', '60%'],
            center: ['25%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '一般报警', itemStyle: { color: '#fac858' }},
              { value: 0, name: '其他', itemStyle: { color: '#021a34' }}
            ]
          },
          {
            name: '重大报警',
            type: 'pie',
            clockWise: false,
            selectedMode: 'single',
            radius: ['45%', '50%'],
            center: ['25%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '重大报警', itemStyle: { color: '#f44336' }},
              { value: 0, name: '其他', itemStyle: { color: '#021a34' }}
            ]
          }
          // ,{
          //   name: '离线报警',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['35%', '40%'],
          //   center: ['25%', '50%'],
          //   label: {
          //     show: false
          //   },
          //   data: [
          //     { value: 0, name: '离线报警', itemStyle: { color: '#5470c6' }},
          //     { value: 0, name: '总数', itemStyle: { color: '#021a34' }}
          //   ]
          // }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  destroyed() {
    this.status = false
  },
  methods: {
    init() {
      var chartDom = document.getElementById('sensor-status-chart-circle')
      var myChart = echarts.init(chartDom)

      this.option && myChart.setOption(this.option)
      myChart.on('click', function(params) {
        console.log('SensorStatus', params)
      })
      this.myChart = myChart
    },
    loadData(data) {
      let tableData = []
      for (let i = 0; i < data.length; i++) {
        tableData = tableData.concat(data[i].goafSensorData.map((item, index) => { return { ...item, goafDevName: data[i].goafDevName, goafDevTypename: data[i].goafDevTypename } }))
      }
      const normal = tableData.filter(item => !item.goafSensorAlarmType).length
      const level_1 = tableData.filter(item => item.goafSensorAlarmType && item.goafSensorAlarmLevel === 0).length
      const level_2 = tableData.filter(item => item.goafSensorAlarmType && item.goafSensorAlarmLevel === 2).length

      const option = JSON.parse(JSON.stringify(this.option))
      const total = tableData.length
      option.series[0].data[0].value = normal
      option.series[1].data[0].value = level_1
      option.series[2].data[0].value = level_2

      option.series[0].data[1].value = total - normal
      option.series[1].data[1].value = total - level_1
      option.series[2].data[1].value = total - level_2
      this.option = option
      if (!this.myChart) {
        var chartDom = document.getElementById('sensor-status-chart-circle')
        var myChart = echarts.init(chartDom)
        this.myChart = myChart
      }
      this.myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.sensor-status-chart-circle{
  ::v-deep .container{
      height: 26vh !important;
      // min-height: 164px;
      position: relative;
      #sensor-status-chart-circle{
          width: 95%;
          height: 100%;
      }
      .legend{
        position: absolute;
        right: 20px;
        top: 20%;
        .legend-item{
          color: #fff;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .lable{
            padding: 8px 10px;
            flex: 1;
          }
          .number{
            width: 100px;
            padding: 8px 10px;
            margin-left: 10px;
            text-align: center;
            .unit{
              padding-left: 10px;
            }
          }
        }
      }
  }
}

</style>