zhny_ui/ems-ui-cloud/src/views/largeScreen/home/right.vue

<template>
  <div>
    <CusModule title="节能分析">
      <div class="grid-container">
        <div class="left-panel">
          <div class="spinner"></div>
          <div class="value-display">
            <span class="value">{{ useElec.value }}</span>
            <span class="unit">{{ useElec.unit }}</span>
          </div>
          <div class="description">
            <span class="text">本月用电量</span>
            <div class="rate" :style="`${useElec.trend === 'up'? 'red': 'green'}`">
              <span>环比</span>
              <img src="@/assets/images/home/down-arrow.svg" alt="">
              <span>{{ useElec.rate }}%</span>
            </div>
          </div>
        </div>
        <div class="right-panel ">
          <div class="panel-content">
            <div class="image-container">
              <img src="@/assets/images/home/water.svg" alt="">
            </div>
            <div class="whitespace-pre">
              <span class="value">{{ userWater.value }}</span>
              <span class="unit">{{ userWater.unit }}</span>
              <div class="label">本月用水量</div>
              <div class="rate">
                <span>环比</span>
                <img src="@/assets/images/home/down-arrow.svg" alt="">
                <span>{{ userWater.rate }}%</span>
              </div>
            </div>
          </div>
          <div class="panel-content">
            <div class="image-container">
              <img src="@/assets/images/home/cost.svg" alt="">
            </div>
            <div class="whitespace-pre">
              <span class="value">{{ userEnergy.value }}</span>
              <span class="unit">{{ userEnergy.unit }}</span>
              <div class="label">本月用能费用</div>
              <div class="rate">
                <span>环比</span>
                <img src="@/assets/images/home/down-arrow.svg" alt="">
                <span>{{ userEnergy.rate }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="设备设施">
      <div class="equip">
        <div v-for="item in equipment" :style="{ 'color': item.color }" class="equip-item" :key="item.name">
          <div><span>{{ item.value }}</span> <span class="unit">{{ item.unit }}</span></div>
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="pie-chart">
        <BaseChart height="100%" width="100%" :option="pieOptions"/>
      </div>
    </CusModule>
    <CusModule class="module-top" title="告警信息">
      <div class="seamless-header">
        <div>告警内容</div>
        <div>告警设备</div>
        <div>告警时间</div>
      </div>
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <div class="seamless-item" v-for="(item, index) in listData" :key="index">
          <div>{{ item.name }}</div>
          <div>{{ item.type }}</div>
          <div>{{ item.createTime }}</div>
        </div>
      </vue-seamless-scroll>
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {mapState} from 'vuex';
import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
import {DateTool} from "@/utils/DateTool";
import {numToStr} from "@/utils";
import {listDeviceStatus, listDeviceType} from "@/api/device/device";

export default {
  name: 'HomeRight',
  data() {
    return {
      useElec: {
        unit: '度',
      },
      userWater: {
        unit: '吨',
      },
      userEnergy: {
        unit: '元',
      },
      equipment: [
        {name: '设备总数', unit: '个', color: '#01A7F0'},
        {name: '在线设备', unit: '个', color: '#B3E3E8'},
        {name: '离线设备', unit: '个', color: '#fff'}
      ],
      equipmentPieData: [],
      classOption: {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止
      },
      listData: [
        {
          name: '温度超阈值上限',
          type: '温湿度01',
          createTime: '2024-10-07 12:15:46'
        },
        {
          name: '制冷压力超阈值上限',
          type: '精密空调',
          createTime: '2024-10-08 11:11:41'
        },
        {
          name: '检测到有水',
          type: '水浸',
          createTime: '2024-10-09 15:15:46'
        },
        {
          name: '开门时间异常',
          type: '东门门禁',
          createTime: '2024-10-10 09:15:46'
        },
        {
          name: '设备离线',
          type: '摄像机1',
          createTime: '2024-10-10 12:33:40'
        },
        {
          name: '检测到有人',
          type: '红外1',
          createTime: '2024-10-10 12:35:40'
        }
      ]

    }
  },
  components: {
    CusModule,
    BaseChart,
    vueSeamlessScroll
  },
  computed: {
    ...mapState('userState', ['areaType']),
    pieOptions() {
      return {
        legend: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const {name, value, percent,} = params
            return `${name} : ${value}个 (${percent}%)`
          }
        },
        color: ["#3FA7FD", "#8AC540", "#F9AF39", "#82D8F9"],
        series: [
          {
            name: "类别统计",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "39%"],
            emphasis: {
              label: {
                show: true,

              },
            },
            data: this.equipmentPieData,
            label: {
              color: "#fff",
              alignTo: "edge",
              fontSize: 14,
              minMargin: 5,
              edgeDistance: 20,
              lineHeight: 20,
              formatter: "{name|{b}}\n{value|{c}个}",
              rich: {
                name: {
                  color: "#B3E3E8",
                },
                value: {
                  color: "#07E3F9",
                },
              },
            },
            labelLine: {
              length: 5,
              length2: 3,
              smooth: true,
            },
          },
        ],
      }
    }
  },
  watch: {
    areaType() {
      this.getPageDatas()
    }
  },
  mounted() {
    this.getPageDatas()
  },
  methods: {
    getPageDatas() {
      this.getElecWaterCost()
      this.getDeviceStatus()
      this.cntListDeviceType()
    },
    async getElecWaterCost() {
      const {data: thisMonthElecMeter} = await qryElecMeterByDate(DateTool.thisMonth(), this.areaType)
      const {data: thisMonthWaterMeter} = await qryWaterMeterByDate(DateTool.thisMonth(), this.areaType)
      const {data: lastMonthElecMeter} = await qryElecMeterByDate(DateTool.lastMonth(), this.areaType)
      const {data: lastMonthWaterMeter} = await qryWaterMeterByDate(DateTool.lastMonth(), this.areaType)
      const elec = {
        unit: '度',
      }
      elec.value = numToStr(thisMonthElecMeter.quantity)
      if (thisMonthElecMeter.quantity > lastMonthElecMeter.quantity) {
        elec.rate = ((thisMonthElecMeter.quantity - lastMonthElecMeter.quantity) / lastMonthElecMeter.quantity * 100).toFixed(2)
        elec.trend = 'up'
      } else {
        elec.rate = ((lastMonthElecMeter.quantity - thisMonthElecMeter.quantity) / lastMonthElecMeter.quantity * 100).toFixed(2)
        elec.trend = 'down'
      }
      this.useElec = elec
      const water = {
        unit: '吨',
      }
      water.value = numToStr(thisMonthWaterMeter.quantity)
      if (thisMonthWaterMeter.quantity > lastMonthWaterMeter.quantity) {
        water.rate = ((thisMonthWaterMeter.quantity - lastMonthWaterMeter.quantity) / lastMonthWaterMeter.quantity * 100).toFixed(2)
        water.trend = 'up'
      } else {
        water.rate = ((lastMonthWaterMeter.quantity - thisMonthWaterMeter.quantity) / lastMonthWaterMeter.quantity * 100).toFixed(2)
        water.trend = 'down'
      }
      this.userWater = water
      const energy = {
        unit: '元',
      }
      energy.value = numToStr(thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost)
      if (thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost > lastMonthElecMeter.useCost + lastMonthWaterMeter.useCost) {
        energy.rate = ((thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost - lastMonthElecMeter.useCost - lastMonthWaterMeter.useCost) / lastMonthElecMeter.useCost * 100).toFixed(2)
        energy.trend = 'up'
      } else {
        energy.rate = ((lastMonthElecMeter.useCost + lastMonthWaterMeter.useCost - thisMonthElecMeter.useCost - thisMonthWaterMeter.useCost) / lastMonthElecMeter.useCost * 100).toFixed(2)
        energy.trend = 'down'
      }
      this.userEnergy = energy
    },
    async getDeviceStatus() {
      const {data} = await listDeviceStatus({
        areaCode: this.areaType
      })
      if (!data) {
        return
      }
      const [total, online, offline] = this.equipment
      total.value = data.total
      online.value = data.onlineCount
      offline.value = data.offlineCount
      this.equipment = [
        total, online, offline
      ]
    },
    async cntListDeviceType() {
      const {data} = await listDeviceType({
        areaCode: this.areaType
      })
      this.equipmentPieData = data.map(item => ({
        name: item.typeName || '其他',
        value: item.total
      }))
    },

  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.grid-container {
  display: flex;
  margin-top: 20px;

  .left-panel {
    position: relative;
    text-align: center;
    margin-left: 20px;
    width: 111px;
    background: url('~@/assets/images/home/r1-left_bg.png') no-repeat;
    background-size: 100% 100%;

    .spinner {
      position: absolute;
      animation: spin 10s linear infinite;
      top: 40px;
      left: 25px;
      width: 63px;
      height: 63px;
      background-image: url('~@/assets/images/home/r1-top_center.png');
    }

    .value-display {
      margin-top: 10px;

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

    .description {
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;

      span.text {
        color: #B3E3E8;
        font-size: 14px;
      }

      .rate {
        justify-content: center;
      }
    }
  }

  .rate {
    color: #00C852;
    font-size: 12px;
    display: flex;
    align-items: center;

    img {
      margin-left: 3px;
    }
  }

  .right-panel {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .panel-content {
      width: 200px;
      height: 75px;
      color: #B3E3E8;
      background: url('~@/assets/images/home/l2_item_bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;

      .whitespace-pre {
        margin-top: 5px;
        margin-left: 20px;

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

      .label {
        font-size: 14px;
      }

      .image-container {
        width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          height: 24px;
          margin-bottom: 5px;
        }
      }
    }
  }
}

.equip {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;

  .equip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1B4A64;
    color: #B3E3E8;
    border-radius: 4px;
    padding: 5px 13px;
    font-size: 14px;

    > div:first-of-type {
      span:first-of-type {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.pie-chart {
  margin: 30px;
  height: 201px;
  background: url("~@/assets/images/device/l1-pie_bg.png") no-repeat;
  background-position: center;
}

.seamless-header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  color: #7DBAFF;
  background: #1B4A64;
  font-size: 16px;

  > div:first-of-type,
  > div:last-of-type {
    flex-basis: 35%;
  }

  > div {
    text-align: center;
  }
}

.seamless-warp {
  overflow: hidden;
  height: 200px;

  .seamless-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;

    &:nth-child(odd) {
      background: #000;
    }

    > div:first-of-type,
    > div:last-of-type {
      flex-basis: 38%;
    }

    > div {
      text-align: center;
      font-size: 13px;
    }
  }
}
</style>