ims-gyee/src/views/layout/stateMonitor/photovoltaicStationIndex/subview/RightSlide.vue

<template>
  <div class="rightcon" :style="{ transform: `scale(${scale})`, transformOrigin: '100% 0' }">
    <div style="display: flex;position: absolute;width: 430px;top: 0;right: 0;z-index: 10;"
      :class="[!isFold ? 'ani1back' : 'ani1']" :style="{ animationDelay: !isFold ? '0s' : '0.2s' }">
      <RightSlideList :companyCode="companyCode" :realtimeData="realtimeData" @changeLine="changeLine" />
      <div style="position:  relative;">
        <img src="@assets/img/photovoltaic/card3bg.png" style="width:430px" :class="[!isFold ? 'fadeIn' : 'fadeOut']"
          :style="{ animationDelay: !isFold ? '0s' : '0.2s' }" />
        <div class="cardcon">
          <CardVue class="animate__animated" :class="[`animate__slide${isFold ? 'Out' : 'In'}Right`]" :img="imgCard3"
            :style="{ animationDelay: foldDelay[0] }" title="值班情况" width="389">
            <template #desc>
              <div style="font-size: 14px;">
                <span style="color: #fff;margin-right: 21px;">
                  今日在岗人数
                </span>
                <span style="color: #1B99FF;margin-left: 50px;">
                  {{ dutyInfo?.workNum ?? '--' }}
                </span>
              </div>
            </template>
            <div style="flex: 1; display: flex;height: 100%;">
              <div style="flex:1">
                <div style="padding-top: 15px; padding-left: 33px;">
                  <img src="@assets/img/photovoltaic/avatar.png" style="width:52px; float: left;margin-right: 3px;" />
                  <div style="font-size: 14px;color: #fff; margin-top: 11px;">今日值班员</div>
                  <div style="font-size: 18px;color: #1B99FF; margin-top: 0px;">
                    {{ dutyInfo?.name ?? '--' }}
                  </div>
                </div>
                <div
                  style="font-size: 12px;color: #b6b6b6;line-height: 28px;clear: both;padding-left: 5px;margin-top: -2px;">
                  <img src="@assets/img/photovoltaic/arrow.png" style="width:26px;float: left;" />
                  <div>
                    联系方式
                  </div>
                </div>
              </div>
              <div style="flex:1;display: flex;height: 100%;padding-right: 22px;">
                <div
                  style=" padding-top: 25px;font-size: 14px;color: #fff;text-align: right;line-height: 22px;padding-left: 30px;">
                  <div>值班长</div>
                  <div style="margin-top: 15px;">现场负责人</div>
                </div>
                <div
                  style="flex:1;padding-top: 25px;font-size: 18px;color: #1B99FF;margin-left: 25px;line-height: 22px; text-align: right;">
                  <div>
                    {{ dutyInfo?.officer ?? '--' }}
                  </div>
                  <div style="margin-top: 15px;">
                    {{ dutyInfo?.responsible ?? '--' }}
                  </div>
                </div>
              </div>
            </div>
          </CardVue>

          <CardVue :style="{ animationDelay: foldDelay[1] }" class="animate__animated"
            :class="[`animate__slide${isFold ? 'Out' : 'In'}Right`]" :img="imgCard4" width="389" title="发电情况"
            desc="单位(MWh)" style="margin-top: 10px;">
            <div class="flexcol" style="padding-left:20px;padding-right: 40px;padding-top: 25px;">
              <div v-for="i in 3">
                <div style="flex-direction: row;justify-content: space-between;">
                  <div>
                    <div style="font-size: 14px;color:#fff">
                      {{ ['', '日', '月', '年'][i] }}发电量
                    </div>
                    <div style="color: #1B99FF;font-size: 20px;font-family: Bicubik;">
                      {{ FDL[i - 1] }}
                    </div>
                  </div>
                  <div style="flex-direction: row;justify-content: space-between;width: 220px;margin-right: 10px;">
                    <div style="align-items: center;">
                      <div style="font-size: 13px; color: #c1c1c1;">
                        计划电量
                      </div>
                      <div style="font-size: 14px; color: #fff;margin-top: 6px;">
                        {{ JHFDL[i - 1] }}
                      </div>
                    </div>
                    <div class="linediv"></div>
                    <div style="align-items: center;">
                      <div style="font-size: 13px; color: #c1c1c1;">
                        完成率
                      </div>
                      <div style="font-size: 14px; color: #fff;margin-top: 6px;">
                        {{ formatPercent(JHFDL[i - 1], FDL[i - 1]) }}
                      </div>
                    </div>
                    <div class="linediv"></div>
                    <div style="align-items: center;">
                      <div style="font-size: 13px; color: #c1c1c1;">
                        等效小时
                      </div>
                      <div style="font-size: 14px; color: #fff;margin-top: 6px;">
                        {{ LYXS[i - 1] }}
                      </div>
                    </div>
                  </div>
                </div>
                <div style="height: 30px;margin-top: 10px;">
                  <Slider :value="getPercent(JHFDL[i - 1], FDL[i - 1])" />
                </div>
              </div>
            </div>
          </CardVue>
          <CardVue :style="{ animationDelay: foldDelay[2] }" class="animate__animated"
            :class="[`animate__slide${isFold ? 'Out' : 'In'}Right`]" :img="imgCard5" width="389" title="今日告警"
            style="margin-top: 10px;">


            <div
              style="flex:1; display: flex; align-items: center; justify-content: space-around;padding: 0 15px;height: 100%;">
              <div class="item1" @click="clickAlarm()">
                <div class="numm">
                  <img src="@assets/img/photovoltaic/gjg.png" class="anii" />
                  {{ alarmData?.totalNum ?? '--' }}
                </div>
                <img src="@assets/img/photovoltaic/gjb.png" />
                <div style="margin-top: -6px;">
                  报警
                </div>
              </div>
              <div class="item1" @click="clickAlarm(0)">
                <div class="numm">
                  <img src="@assets/img/photovoltaic/wqrg.png" class="anii" />
                  {{ alarmData?.unCdNum ?? '--' }}
                </div>
                <img src="@assets/img/photovoltaic/wqrb.png" />
                <div style="margin-top: -6px;">

                  未确认</div>

              </div>
              <div class="item1" @click="clickAlarm(1)">
                <div class="numm">
                  <img src="@assets/img/photovoltaic/yqrg.png" class="anii" />
                  {{ alarmData?.cdNum ?? '--' }}
                </div>
                <img src="@assets/img/photovoltaic/yqrb.png" />
                <div style="margin-top: -6px;">

                  已确认</div>

              </div>
            </div>
          </CardVue>

          <CardVue :style="{ animationDelay: foldDelay[3] }" class="animate__animated"
            :class="[`animate__slide${isFold ? 'Out' : 'In'}Right`]" :img="imgCard6" width="389" title="设备状态"
            style="margin-top: 10px;">


            <div
              style="height: 100%; padding: 34px 26px 27px 22px;display: flex;align-items: center;justify-content: space-between;">
              <div class="chart-online" @click="tolightMatrixMonitor()">
                <div class="device-online" style="cursor: pointer">
                  <div class="device-online-progess"></div>
                  <div class="device-online-data">
                    <img src="@assets/img/images/gfL-orange.png" width="31" height="26" style="margin-left: 30px" />
                    <div class="online-data" style="margin-top: 5px">
                      {{ ztp }}
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-left: 24px;margin-bottom: -5px;cursor: pointer;">
                <ColorDiv @click="tolightMatrixMonitor(3)" color="white" label="通信中断" :value="sbzt?.[3] ?? '--'"
                  :percent="sbztp[3]" />
                <ColorDiv @click="tolightMatrixMonitor(2)" color="red" label="设备停机" :value="sbzt?.[2] ?? '--'"
                  :percent="sbztp[2]" />
                <ColorDiv @click="tolightMatrixMonitor(1)" color="yellow" label="带障运行" :value="sbzt?.[1] ?? '--'"
                  :percent="sbztp[1]" />
                <ColorDiv @click="tolightMatrixMonitor(0)" color="blue" label="正常运行" :value="sbzt?.[0] ?? '--'"
                  :percent="sbztp[0]" />
              </div>
            </div>
          </CardVue>
        </div>
      </div>
    </div>
    <!-- 展开按钮 -->
    <div style="position: absolute;right: 0;z-index: 10;top:170px;width: 15px; cursor: pointer;"
      @click="isFold = !isFold">
      <img src="@assets/img/photovoltaic/right-btn.png" style="width: 15px" />
      <img style="position: absolute;width: 7px;top: 310px;right: 6px;" :src="!isFold ? rightr : leftr" />
    </div>
  </div>
</template>
<script setup>
import Slider from '../components/Slider.vue'
import ColorDiv from '../components/ColorDiv.vue'
import RightSlideList from './RightSlideList.vue';
import { GetPlanValues } from '@api/home'
import { GetDutyInfoData } from '@api/station'
import { GetCompanEquipmentsDatas, GetRtValuesByTagName } from '@api/photovoltaicStation'
import { computed, nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue';
import { useResizeScale, useClickAlarm } from '../hooks';
import CardVue from '../components/CardVue.vue';
import { alarmRefreshTime, rtDataRefreshTime } from '@/config'
import { useRouter } from 'vue-router';

const props = defineProps({
  realtimeData: Object,
  companyCode: String,
  alarmData: Object,
  calcData: Object
})

const router = useRouter()

const clickAlarm = useClickAlarm()

const emit = defineEmits(['changeLine'])
const changeLine = v => emit('changeLine', v)

function tolightMatrixMonitor(status = '') {
  router.push({
    name: 'lightMatrixMonitor',
    query: {
      companyCode: props.companyCode,
      nemCode: props.companyCode,
      czType: status
    }
  })
}

const showCardVue = ref()
function cardanimationend() {
  if (isFold.value) {
    showCardVue.value = false
  }
}
function cardanimationstart() {
  if (!isFold.value) {
    showCardVue.value = true
  }
}

const scale = useResizeScale()

const leftr = require('@assets/img/photovoltaic/arrow-left.png')
const rightr = require('@assets/img/photovoltaic/arrow-right.png')
const imgCard3 = require('@assets/img/photovoltaic/card3.png')
const imgCard4 = require('@assets/img/photovoltaic/card4.png')
const imgCard5 = require('@assets/img/photovoltaic/card5.png')
const imgCard6 = require('@assets/img/photovoltaic/card6.png')

const isFold = ref(false)

const foldDelay = computed(() => {
  const a = ['0s', '0.1s', '0.2s', '0.3s']
  if (isFold.value) {
    a.reverse()
  }
  return a
})

// 实际发电量
const FDL = computed(() => {
  const realtimeData = props.realtimeData
  return realtimeData ? [realtimeData.RFDL, realtimeData.YFDL, realtimeData.NFDL].map(i => (i).toFixed(2)) : ['--', '--', '--']
})
// 计划发电量
const JHFDL = ref(['--', '--', '--'])
// 值班信息
const dutyInfo = ref()
// 等效时长
const LYXS = computed(() => {
  const d = props.realtimeData
  return d ? [d.RLYXS, d.YLYXS, d.NLYXS].map(i => (i).toFixed(2)) : ['--', '--', '--']
})
// 设备状态
const sbzt = ref()
// 状态百分比
const sbztp = computed(() => {
  if (!sbzt.value) {
    return ['--', '--', '--', '--']
  }
  const all = sbzt.value.reduce((x, y) => x + y)
  return sbzt.value.map(i => `${(i / all * 100).toFixed(2)}%`)
})
// 总百分比
const ztp = computed(() => {
  if (!sbzt.value) {
    return '--'
  }
  const all = sbzt.value.reduce((x, y) => x + y)
  const sub = sbzt.value.slice(3).reduce((x, y) => x + y)
  return `${(100 - sub / all * 100).toFixed(2)}%`
})

function init() {
  GetPlanValues({
    companyCode: props.companyCode,
    planDate: formatDateStr(new Date())
  }).then(res => {
    JHFDL.value = [res.RJHFDL, res.YJHFDL, res.NJHFDL].map(i => {
      if (isNaN(i) || i === '') {
        return '--'
      } else {
        return i | 0
      }
    })
  })

  GetDutyInfoData({
    stationCode: props.companyCode,
    dutyDate: formatDateStr(new Date())
  }).then(res => {
    dutyInfo.value = res
  })
}

watchEffect(init)

onMounted(() => {
  updateDeviceState()
})

let timer
// 刷新设备状态
function updateDeviceState() {
  GetCompanEquipmentsDatas(props.companyCode).then(({ AMDATAS, CBDATAS, EMIDATAS, INDATAS, SCBDATAS }) => {
    const map = {
      AM: AMDATAS,
      CB: CBDATAS,
      EMI: EMIDATAS,
      IN: INDATAS,
      SCB: SCBDATAS
    }
    const kvmap = {}
    const list = [];

    for (const en of Object.entries(map)) {
      const [type, typeList] = en
      typeList.forEach(({ SBZT }) => {
        list.push(SBZT)
        kvmap[SBZT] = type
      })
    }
    const count = [0, 0, 0, 0]
    GetRtValuesByTagName(list.join('|')).then(res => {
      res.forEach(({ value, tagName }) => {
        const type = kvmap[tagName]
        const s = getRealState(value, type)
        count[s]++
      })
      sbzt.value = count
      timer = setTimeout(updateDeviceState, rtDataRefreshTime)
    })
  })
}

onUnmounted(() => {
  clearTimeout(timer)
})

function getRealState(value, type) {
  value = Math.round(value)
  if (type === 'EMI' || type === 'AM') {
    return value >= 2 ? 3 : value
  }
  return value >= 3 ? 3 : value
}


function getPercent(total, finish) {
  if (isNaN(total) || isNaN(finish)) {
    return 0
  }
  const r = parseInt(finish / total * 100)
  return (r > 100 ? 100 : r)
}
function formatPercent(total, finish) {
  if (isNaN(total) || isNaN(finish)) {
    return '--'
  }
  return getPercent(total, finish) + '%'
}


function formatDateStr(date) {
  const fix = f => ('0' + f).slice(-2)
  return `${date.getFullYear()}-${fix(date.getMonth() + 1)}-${fix(date.getDate())}`
}
</script>
<style lang="less" scoped>
@keyframes toleft1 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(417px);
  }
}

@keyframes toright1 {
  from {
    transform: translateX(417px);
  }

  to {
    transform: translateX(0);
  }
}


.ani1 {
  animation-name: toleft1;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.ani1back {
  animation-name: toright1;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes float1 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
  }
}

.rightcon {
  position: absolute;
  right: 70px;
  top: 45px;
  margin-top: 59px;
  bottom: 0;
  display: flex;
  height: 947px;
  z-index: 2;
}

.cardcon {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-top: 25px;
  padding-left: 9px;
  padding-right: 32px;
}

.tt {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  margin-top: 3px;
  margin-left: 15px;
  margin-right: 15px;
}

.tt span {
  color: #B1B1B1;
  font-size: 14px;
  margin-right: 15px;
}

.rel {
  position: relative;
}

.item1 {
  width: 92px;
  text-align: center;
  font-size: 13px;
  color: #ddd;
  cursor: pointer;
}

.numm {
  font-size: 18px;
  color: #fff;
  font-family: Bicubik;
  line-height: 43px;
  position: relative;
}

.anii {
  width: 46px;
  position: absolute;
  left: 23px;
  top: 20px;
  z-index: 1;
  animation-name: float1;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.flexcol,
.flexcol div {
  display: flex;
  flex-direction: column;
}

.linediv {
  content: '';
  border-left: 1px dashed #979795;
  height: 42px;
  margin: 0 15px;
}


.device-online {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 122px;
  background: url("../../../../../assets/img/images/equipment-online-rate-orange.png") no-repeat;
  background-size: cover;

  .device-online-progess {
    position: relative;
    top: 0px;
    left: 1px;
    width: 77%;
    height: 77%;
    background: url("../../../../../assets/img/images/equipment-online-progress-orange.png") no-repeat;
    background-size: cover;
    transform: rotateZ(360deg);
    animation: circleProgess 3s linear infinite;
  }

  @keyframes circleProgess {
    0% {
      transform: rotateZ(0deg);
    }

    25% {
      transform: rotateZ(90deg);
    }

    50% {
      transform: rotateZ(180deg);
    }

    75% {
      transform: rotateZ(270deg);
    }

    100% {
      transform: rotateZ(360deg);
    }
  }

  .device-online-data {
    position: absolute;
    text-align: center;
    margin-top: 5px;

    .icon-Photovoltaic-pv {
      font-size: 46px;
      color: #1b99ff;
    }

    .online-data {
      font-family: Bicubik;
      font-size: 15px;
      color: #fff;
      width: 90px;
    }
  }
}</style>
<style>
@keyframes fadein {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@keyframes fadeout {
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

.fadeIn {
  animation-name: fadein;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.fadeOut {
  animation-name: fadeout;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}</style>