nkScreen/src/views/Energy/Energy.vue

<template>
  <div class="home">
    <div class="home_flex">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="近七天用水监测(全场)">
          <div class="chart_content">
            <chart-water v-if="waterList.length > 0" :id="0" :list="waterList"></chart-water>
            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
          </div>
        </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="近七天用电监测(全场)">
          <div class="chart_content">
            <chart-ele v-if="eleList.length > 0" :id="0" :list="eleList"></chart-ele>
            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
          </div>
        </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="近七天用料监测(全场)">
          <div class="chart_content">
            <chart-feed v-if="feedList.length > 0" :id="0" :list="feedList"></chart-feed>
            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
          </div>
        </x-box>
      </transition>
    </div>
    <div class="home_center">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutUp"
      >
        <x-tabs v-if="show"></x-tabs>
      </transition>
    </div>
    <div class="home_flex">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
      >
       <x-box v-if="show" name="本月用水TOP5">
        <div class="chart_content">
          <div class="chart_flex">
            <div class="chart_box" v-for="(item, i) in waterRank" :key="i">
              <div :class="['icon_box', 'rank' + (i+1)]"></div>
              <div class="num_box">
                <div class="num_name">{{item.name}}</div>
                <div class="num_text">{{item.value}}吨</div>
              </div>
            </div>
          </div>
        </div>
      </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
      >
        <x-box v-if="show" name="本月用电TOP5">
        <div class="chart_content">
          <div class="chart_flex">
            <div class="chart_box" v-for="(item, i) in eleRank" :key="i">
              <div :class="['icon_box', 'rank' + (i+1)]"></div>
              <div class="num_box">
                <div class="num_name">{{item.name}}</div>
                <div class="num_text">{{item.value}}kw·h</div>
              </div>
            </div>
          </div>
        </div>
      </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
      >
        <x-box v-show="show" name="能耗预警">
        <div class="chart_content">
          <div class="warn_scroll" ref="scroll">
            <template v-if="warnList.length > 0">
              <div class="warn_item" v-for="(item, i) in warnList" :key="i">
                <div class="warn_icon"></div>
                <div class="warn_text">{{item.warningTime}} {{item.buildName}} {{item.warningContent}}</div>
              </div>
            </template>
            <template v-else>
              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
            </template>
          </div>
        </div>
      </x-box>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "Energy"
}
</script>
<script setup>
  import { Empty } from "ant-design-vue";
  import {ref, onMounted, getCurrentInstance, onBeforeUnmount} from 'vue'
  import {getWaterRank, getSevenWater, getSevenEle, getEleRank, getWarnList, getFeedSeven} from "../../utils/api";
  import XBox from "../../components/XBox.vue";
  import XTabs from '../../components/XTabs.vue';
  import ChartWater from "./charts/ChartWater.vue";
  import ChartEle from "./charts/ChartEle.vue";
  import ChartFeed from "./charts/ChartFeed.vue";
  import { throttle } from "../../utils";

  const { proxy } = getCurrentInstance()

  const waterList = ref([
  ])

  const eleList = ref([
  ])

  const initList = () => {
    let params = {
      type: 4
    }
    getSevenWater(params).then(res => {
      let arr = []
      if(res.data.list.length > 0) {
        res.data.list.forEach(item => {
          arr.push({ date: proxy.$moment(item.createTime).format('MM-DD'), value: item.waterValue })
        })
      }
      waterList.value = arr;
    })
    getSevenEle(params).then(res => {
      let arr = []
      if(res.data.list.length > 0) {
        res.data.list.forEach(item => {
          arr.push({ date: proxy.$moment(item.createTime).format('MM-DD'), value: item.electricityValue })
        })
      }
      eleList.value = arr;
    })
  }


  const waterRank = ref([])
  const eleRank = ref([])

  const initRank = () => {
    let params = {
      type: 2
    }
    getWaterRank(params).then(res => {
      let arr = [];
      if(res.data.length >0) {
        res.data.forEach((item, i) => {
          if(i< 5) {
            arr.push({ name: item.location, value: item.energyWaterValue })
          }
        })
      }
      waterRank.value = arr;
    })
    getEleRank(params).then(res => {
      let arr = [];
      if(res.data.length >0) {
        res.data.forEach((item, i) => {
          if(i< 5) {
            arr.push({ name: item.location, value: item.energyElectricityValue })
          }
        })
      }
      eleRank.value = arr;
    })
  }

  const scroll = ref()
  const warnList = ref([])
  const current = ref(1)
  const size = ref(10)
  const fished = ref(false)
  const initWarn = () => {
    if(fished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value,
        type: 2
      }
      getWarnList(params).then(res => {
        warnList.value = warnList.value.concat(res.data.records);
        if(res.data.records.length < size.value) {
          fished.value = true
        }
        current.value++
      })
    }
  }

  const handlerScroll = throttle(() => {
    let clientHeight = scroll.value.clientHeight;
    let scrollHeight = scroll.value.scrollHeight;
    let scrollTop = scroll.value.scrollTop;
    if(clientHeight + scrollTop >= scrollHeight) {
      initWarn()
    }
  }, 100)

  const feedList = ref([])
  const initFeed = () => {
    getFeedSeven({}).then(res => {
      let arr = []
      res.data.forEach(item => {
        arr.push({ date: proxy.$moment(item.createDate).format('MM-DD'), value: item.value })
      })
      feedList.value = arr
    })
  }

  const show = ref(false)

  onMounted(() => {
    scroll.value.addEventListener('scroll', handlerScroll)
    initList()
    initRank()
    initWarn()
    initFeed()
    show.value = true
  })

  onBeforeUnmount(() => {
    scroll.value.removeEventListener('scroll', handlerScroll)
  })

</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
}
.home_flex {
  width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home_center {
  width: 840px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chart_content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
}
.chart_flex {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.chart_box {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon_box {
  width: 32px;
  height: 34px;
}
.num_box {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  line-height: 34px;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 30, 61, .68);
  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
  box-sizing: border-box;
  padding: 0 10px;
  color: #BBD6FF;
  cursor: pointer;
  border: 1px solid #00668D;
}
.rank1 {
  background: url("../../assets/tabs/top1.png") no-repeat;
  background-size: 100% 100%;
}
.rank2 {
  background: url("../../assets/tabs/top2.png") no-repeat;
  background-size: 100% 100%;
}
.rank3 {
  background: url("../../assets/tabs/top3.png") no-repeat;
  background-size: 100% 100%;
}
.rank4 {
  background: url("../../assets/tabs/top4.png") no-repeat;
  background-size: 100% 100%;
}
.rank5 {
  background: url("../../assets/tabs/top5.png") no-repeat;
  background-size: 100% 100%;
}

.warn_scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.warn_scroll::-webkit-scrollbar {
  display: none;
}
.warn_item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(0, 30, 61, .68);
  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #BBD6FF;
  cursor: pointer;
  border: 1px solid #00668D;
  margin-bottom: 6px;
}
.warn_icon {
  width: 24px;
  height: 24px;
  background: url('../../assets/images/warnOrgin.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.warn_text {
  flex: 1;
  white-space: nowrap;         /* 防止文本换行 */
  overflow: hidden;            /* 隐藏溢出的文本 */
  text-overflow: ellipsis;
}
</style>