zhny_ui/ems-ui-cloud/src/views/largeScreen/device/left.vue

<template>
  <div>
    <CusModule title="设备类型统计">
      <Pie3d :pieData="pieData"/>
    </CusModule>
    <CusModule class="module-top" title="设备状态分析">
      <div class="dev-top">
        <div class="dev-ttl">
          <div class="txt-sml txt-clr">设备总数</div>
          <div class="num">
            <span v-for="value, index in countFormat(deviceTotal, 6)" :key="index">{{ value }}</span>
          </div>
        </div>
      </div>
      <div class="dev-flx">
        <div v-for="i in equipList" class="dev-itm" :key="i.name" :style="{ backgroundImage: `url(${i.image})` }">
          <div class="val">
            <span class="num">{{ i.value }}</span><span class="unit">{{ i.unit }}</span>
          </div>
          <div class="pct">
            {{ i.pct }}<span class="unit">%</span>
          </div>
          <div class="name">
            {{ i.name }}
          </div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="处置状态">
      <div class="dev-flex">
        <div class="dev-item" v-for="item in deal" :key="item.name">
          <div class="percent">{{ item.percent }} %</div>
          <div class="details">
            <div class="alarm">
              {{ item.name }}：<span class="alarm-count">{{ item.value }}次</span>
            </div>
            <div>
              <span class="value">{{ item.dealValue }}</span><span class="unit">次</span>
            </div>
            <div>已处理</div>
          </div>
        </div>
      </div>
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import Pie3d from './pie3d.vue'
import {mapState} from 'vuex';
import {listDeviceStatus, listDeviceType} from "@/api/device/device";
import {fetchCntHandled} from "@/api/alarm/alarm-info";
import {DateTool} from "@/utils/DateTool";

export default {
  name: 'DeviceLeft',
  data() {
    return {
      pieData: [],
      deviceTotal: 0,
      equipList: [
        {
          name: "在线设备",
          value: 530,
          unit: "次",
          image: require("@/assets/images/device/l2-item1_bg.png"),
        },
        // {
        //   name: "故障设备",
        //   value: 12,
        //   pct: 30,
        //   unit: "次",
        //   image: require("@/assets/images/device/l2-item2_bg.png"),
        // },
        {
          name: "离线设备",
          value: 6,
          unit: "次",
          image: require("@/assets/images/device/l2-item3_bg.png"),
        },
      ],
      deal: [
        {
          name: '今日报警',
          percent: 70,
          value: 10,
          dealValue: 7
        },
        {
          name: '本月报警',
          percent: 80,
          value: 300,
          dealValue: 240
        },
      ]
    };
  },
  components: {
    CusModule,
    BaseChart,
    Pie3d
  },
  computed: {
    ...mapState('userState', ['areaType']),
  },
  watch: {
    areaType() {
      this.getDeviceData()
    }
  },
  mounted() {
    this.getDeviceData()
    this.timer && clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getDeviceData()
    }, 60000 * 3)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    //字符串转数组 总数
    countFormat(val, total = 0) {
      let str = String(val);
      let numArr = str.split("");
      if (total === 0) return numArr;
      let c = numArr.length <= total && total - numArr.length;
      let arr = [];
      if (c || c === 0) {
        for (let i = 0; i < c; i++) {
          numArr.unshift("0");
        }
        return numArr;
      } else {
        for (let i = 0; i < total; i++) {
          arr.push("9");
        }
        return arr;
      }
    },
    getDeviceData() {
      this.cntListDeviceType()
      this.cntListDeviceStatus()
      this.getCntHandled()
    },
    async cntListDeviceType() {
      const {data} = await listDeviceType({
        areaCode: this.areaType
      })
      this.pieData = data.map(item => ({
        name: item.typeName || '其他',
        value: item.total
      }))
    },
    async cntListDeviceStatus() {
      const {data} = await listDeviceStatus({
        areaCode: this.areaType
      })
      const {
        total,
        onlineCount
      } = data
      const [online, offline] = this.equipList
      this.deviceTotal = total
      const onlinePct = (onlineCount / total * 100).toFixed(1)
      online.pct = onlinePct
      offline.pct = (100 - onlinePct).toFixed(1)
    },
    async getCntHandled() {
      const {data: thisday = {}} = await fetchCntHandled({
        areaCode: this.areaType,
        startRecTime: DateTool.now()
      })

      const {data: thisMonth = {}} = await fetchCntHandled({
        areaCode: this.areaType,
        startRecTime: DateTool.thisMonth()
      })
      const [thisDayData, thisMonthData] = this.deal
      thisMonthData.value = thisMonth.cnt || 0
      thisMonthData.dealValue = thisMonth.handledCnt || 0
      thisMonthData.percent = thisMonthData.value && (thisMonthData.dealValue / thisMonthData.value * 100).toFixed(2)
      thisDayData.value = thisday.cnt || 0
      thisDayData.dealValue = thisday.handledCnt || 0
      thisDayData.percent = thisDayData.value && (thisDayData.dealValue / thisDayData.value * 100).toFixed(2)
      this.deal = [thisDayData, thisMonthData]
    },
  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.dev-top {
  height: 66px;
  background-image: url('~@/assets/images/device/l2-top_bg.png');
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 5px;
  margin-top: 2px;

  .dev-ttl {
    .txt-sml {
      margin-top: 12px;
      color: #B3E3E8;
      font-size: 12px;
    }

    .num {
      margin-top: 2px;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 16px;
      margin-left: 16px;
    }
  }
}

.dev-flx {
  display: flex;
  justify-content: space-around;
  margin-top: 4px;

  .dev-itm {
    width: 103px;
    height: 150px;
    position: relative;

    .val {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 82px;
      color: #07e3f9;
    }

    .pct {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 50px;
    }

    .name {
      width: 100%;
      text-align: center;
      position: absolute;
      color: #B3E3E8;
      font-size: 14px;
      bottom: 18px;
    }

    .num {
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.dev-flex {
  display: flex;
  justify-content: space-around;
  margin-top: 3px;

  .dev-item {
    width: 157px;
    height: 235px;
    text-align: center;
    color: #B3E3E8;
    font-size: 12px;
    background: url("~@/assets/images/device/l3-item_bg.png");
    background-position: center;
    background-repeat: no-repeat;

    .percent {
      margin-top: 45px;
      font-size: 18px;
    }

    .details {
      margin-top: 40px;
      font-size: 14px;

      .alarm {
        margin-bottom: 15px;
        font-size: 14px;

        .alarm-count {
          color: #E15050;
        }
      }

      .value {
        color: #07e3f9;
        font-size: 18px;
      }

    }
  }
}
</style>