最新版本541200007

jiangping

2025-01-07 b0c4a1ff9d2df09c137807e9c38c43bf9a097237

 screen/src/views/FireFighting.vue

@@ -1,7 +1,8 @@
<template>
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" />
      <!-- <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" /> -->
      <img src="@/assets/images/SecurityControl/bg@2x_2.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-消防态势监控</div>
@@ -29,7 +30,7 @@
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
                  <span class="item">故障</span>
                  <span class="item">离线</span>
                  <span class="item">正常</span>
                </div>
                <div class="one-swiper list_content">
                  <div class="swiper-wrapper">
@@ -37,7 +38,7 @@
                      <div class="line">
                        <span class="item name">{{ item.typeName }}</span>
                        <span class="item">{{ item.totalDeviceNum || 0 }}</span>
                        <span class="item">{{ item.alarmDeviceNum || 0 }}</span>
                        <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span>
                        <span class="item">{{ item.shieldDeviceNum || 0 }}</span>
                        <span class="item">{{ item.errDeviceNum || 0 }}</span>
                        <span class="item">{{ item.offlineDeviceNum || 0 }}</span>
@@ -88,7 +89,7 @@
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="name">总数</div>
                  <div class="num">{{ dataList4.onlineDeviceNum }}</div>
                </div>
              </div>
@@ -100,6 +101,13 @@
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
@@ -107,17 +115,10 @@
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt="">
                <div class="content">
                  <div class="name">离线</div>
                  <div class="name">正常</div>
                  <div class="num num4">{{ dataList4.offlineDeviceNum }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
                </div>
              </div>
            </div>
@@ -130,29 +131,37 @@
                  <span>温度/湿度传感器</span>
                </div>
                <div class="right">
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">1/5</div>
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                  <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex8 + 1 }}/{{ dataList8.length }}</div>
                  <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                  <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>
                </div>
                <div class="list">
                <div class="list" v-if="dataList8 && dataList8.length > 0">
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>°C</span></div>
                      <div class="la">阈值 0～100°C</div>
                      <div class="num"
                        v-if="dataList8[dataIndex8].temperatureData && dataList8[dataIndex8].temperatureData.latestValue">
                        {{ Number(dataList8[dataIndex8].temperatureData.latestValue).toFixed(1) }}<span>°C</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}～{{
                        dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</div>
                    </div>
                  </div>
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>%</span></div>
                      <div class="la">阈值 0～100%</div>
                      <div class="num"
                        v-if="dataList8[dataIndex8].humidityData && dataList8[dataIndex8].humidityData.latestValue">{{
                          Number(dataList8[dataIndex8].humidityData.latestValue).toFixed(1) }}<span>%</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{
                        dataList8[dataIndex8].humidityData?.alarmHigh }}°C</div>
                    </div>
                  </div>
                </div>
@@ -165,35 +174,30 @@
                  <span>实时传感器检测</span>
                </div>
                <div class="right">
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">1/5</div>
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                  <img @click="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex9 + 1 }}/{{ dataTotal9 }}</div>
                  <img @click="changeData9(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title_wrap">
              <div class="list_wrap2">
                <div class="item" v-for="item, i in dataListTemp9">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>1路/水压</span>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>2路/液位</span>
                  <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                    <div class="watergage" :id="'watergage' + i"></div>
                    <div class="unit">{{ item.obj.value }}</div>
                    <div class="place">阈值 {{ item.level }}</div>
                  </div>
                </div>
                <div class="list">
                  <div class="watergage_wrap">
                    <div class="watergage" id="watergage"></div>
                    <div class="unit">2.50 <span>Mpa</span></div>
                    <div class="place">阈值 0～2.5Mpa</div>
                  </div>
                  <div class="item">
                    <div class="liquidlevel_wrap">
                      <div class="liquidlevel" id="liquidlevel"></div>
                      <div class="unit">3.45 <span>M</span></div>
                      <div class="place">阈值 0～4.50M</div>
                  <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                    <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                    <div class="liquidle_te">
                      <div class="unit">{{ item.obj.value }}</div>
                      <div class="placeT">阈值{{ item.level }}</div>
                    </div>

                  </div>
                </div>
              </div>
@@ -218,12 +222,12 @@
                <div class="separate"></div>
                <div class="item">
                  <div>计划维保</div>
                  <div class="num active">{{ dataList5.planProtectTotal }}</div>
                  <div class="num acc">{{ dataList5.planProtectTotal }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>维保率</div>
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                    ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                </div>
              </div>
@@ -284,7 +288,7 @@
                        <span class="status" v-else-if="item.handleStatus == 3">核实中</span>
                        <span v-else class="status">未核实</span>
                      </div>
                      <div class="have_time">已经发生{{ item.haveTime }}</div>
                      <div class="have_time">已发生{{ item.haveTime }}</div>
                    </div>
                    <div class="wrap">
                      <div class="title">
@@ -311,7 +315,7 @@
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, nextTick } from 'vue'
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
@@ -326,7 +330,9 @@
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList
  getFighalarmDataList,
  getTemperatureHumidityData,
  monitorDataListP
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -342,9 +348,14 @@
}, 1000)


const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 1
const initWatergage = (id, item) => {
  const myChart = echarts.init(document.getElementById(id))
  var data_value = item.obj.value.replaceAll('Mpa', '')
  const startI = item.level.indexOf('-')
  const endI = item.level.indexOf('Mpa')
  let maxNum = item.level.slice(startI + 1, endI)
  let minNum = item.level.slice(0, startI)
  // let maxNum = 
  const option = {
    barMaxWidth: 3,
    polar: {
@@ -371,8 +382,8 @@
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        min: minNum,
        max: maxNum,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
@@ -504,9 +515,17 @@
    myChart.resize()
  })
}
const initLiquidlevel = () => {
  const myChart = echarts.init(document.getElementById('liquidlevel'))
  var data = 65
const initLiquidlevel = (id, item) => {
  const myChart = echarts.init(document.getElementById(id))
  const startI = item.level.indexOf('-')
  const endI = item.level.indexOf('M')
  let maxNum = item.level.slice(startI + 1, endI)
  let minNum = item.level.slice(0, startI)
  let conNum = maxNum - minNum
  let acNum = item.obj.value.replaceAll('M', '')
  var data = (((acNum - minNum) / conNum) * 100).toFixed(0)
  console.log('data', data)

  const option = {
    tooltip: {
      trigger: 'none',
@@ -544,7 +563,7 @@
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -562,7 +581,7 @@
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -595,7 +614,7 @@
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
@@ -644,9 +663,9 @@
        label: {
          distance: 15,
          show: true,
          position: data > 58 ? 'inside' : 'top',
          position: data > 52 ? 'inside' : 'top',
          formatter: '{c}' + '%',
          fontSize: 80,
          fontSize: 72,
          color: '#1AFCFF',
          textShadowColor: '#03C7F9',
          textShadowBlur: 30,
@@ -746,8 +765,9 @@
  const data4 = dataList3.value.map(i => i.errNum)
  const months = dataList3.value.map(i => {
    return i.startDate.substring(5, 7) + '月'
  }
  )
  })


  const option = {
    legend: {
      x: "center",
@@ -913,11 +933,84 @@
  getFighalarmDataList().then(res => {
    dataList7.value = res.data || []
    dataList7.value = dataList7.value.map(item => {
      item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.alarmTime).getTime()).format('H小时m分钟')
      let times = new Date().getTime() - new Date(item.alarmTime).getTime()
      if (times > 86400000) {
        item.haveTime = dayjs.duration(times).format('D天H小时m分钟')
      } else if (times > 3600000) {
        item.haveTime = dayjs.duration(times).format('H小时m分钟')
      } else {
        item.haveTime = dayjs.duration(times).format('m分钟')
      }
      return item
    })
  })
}

const dataList8 = ref([])
const dataIndex8 = ref(0)

const dataList9 = ref([])
const dataListTemp9 = ref([])
const dataIndex9 = ref(0)
const dataTotal9 = ref(0)

const getData8 = () => {
  getTemperatureHumidityData().then(res => {
    dataList8.value = res.data || []
  })
  monitorDataListP().then(res => {
    dataList9.value = res.data || []
    dataList9.value.forEach(item => {
      if (item.dataList && item.dataList.length > 0) {
        item.obj = item.dataList[0]
      }
    })
    if (dataList9.value.length > 0) {
      dataTotal9.value = Math.ceil(dataList9.value.length / 2)
      dataListTemp9.value = dataList9.value.slice(0, 2)
    }
    initEcharts9()
  })
}
const changeData8 = (num) => {
  if (dataIndex8.value == dataList8.value.length - 1 && num > 0) {
    dataIndex8.value = 0
  } else if (dataIndex8.value == 0 && num < 0) {
    dataIndex8.value = dataList8.value.length - 1
  } else {
    dataIndex8.value = dataIndex8.value + num
  }
}
const changeData9 = (num) => {
  // return
  if (dataIndex9.value == dataTotal9.value - 1 && num > 0) {
    dataIndex9.value = 0
    dataListTemp9.value = dataList9.value.slice(0, 2)
  } else if (dataIndex9.value == 0 && num < 0) {
    dataIndex9.value = dataTotal9.value - 1
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length)
  } else {
    dataIndex9.value = dataIndex9.value + num
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2)
  }
  initEcharts9()
}
const initEcharts9 = () => {
  dataListTemp9.value.forEach((item, i) => {

    if (item.obj && item.obj.typeCode == 253958) {
      nextTick(() => {
        initWatergage('watergage' + i, item)
      })
    }
    if (item.obj && item.obj.typeCode == 254001) {
      nextTick(() => {
        initLiquidlevel('liquidlevel' + i, item)
      })
    }
  })
}


const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
@@ -953,6 +1046,7 @@
  getData5()
  // getData6()
  getData7()
  getData8()
  setInterval(() => {
    getData2()
    getData3()
@@ -963,17 +1057,15 @@
  setInterval(() => {

    getData5()
    getData8()

  }, 60 * 60 * 1000)

  initWatergage()
  initLiquidlevel()

  setTimeout(() => {
    loopFn1()
    loopFn2()
  }, 12000)
  

})


@@ -1144,16 +1236,16 @@

            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #e9bf43 50%,
                  #eb8131 100%);
                  #eb8131 0%,
                  #d0a72c 50%,
                  #e9bf43 100%);
            }

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #9e9e9e 50%,
                  #9e9e9e 100%);
                  #78db91 50%,
                  #6de8b0 100%);
            }

            .num5 {
@@ -1168,11 +1260,13 @@
    }

    .center_box_two {
      width: 100%;
      width: 108%;
      display: flex;
      margin: 0 -4%;

      .content_wrap {
        flex: 1;
        flex-shrink: 0;
        margin-right: 20px;

        .title_wrap {
@@ -1216,8 +1310,9 @@
            }

            .icon {
              width: 13px;
              height: 16px;
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }
@@ -1248,6 +1343,18 @@
            .item {
              display: flex;
              align-items: center;
              position: relative;

              .place {
                position: absolute;
                top: 120px;
                right: 70px;
                z-index: 999;
                font-size: 13px;
                color: #869CC9;
                width: 120px;
                text-align: center;
              }

              .icon {
                width: 70px;
@@ -1273,76 +1380,111 @@
              }
            }
          }
        }

          .watergage_wrap {
            text-align: center;
            position: relative;
            left: 30px;
        .list_wrap2 {
          display: flex;
          align-items: center;
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

            .watergage {
              width: 130px;
              height: 112px;
            }
          .item {
            width: 50%;
            height: 100%;

            .unit {
              font-weight: 500;
              font-size: 18px;
              position: relative;
              bottom: 16px;
              left: 4px;
            .title {
              height: 46px;
              display: flex;
              align-items: center;
              color: #D2E0FF;
              padding-left: 20px;

              span {
                font-size: 12px;
                font-weight: 400;
              .icon {
                width: 16px;
                margin-right: 8px;
              }
            }

            .place {
            .watergage_wrap {
              text-align: center;
              position: relative;
              bottom: 16px;
              left: 4px;
              font-size: 13px;
              color: #869CC9;
            }
          }
              left: 30px;

          .liquidlevel_wrap {
            transform: scale(0.24);
            color: #fff;
            text-align: center;
            position: relative;
            left: 20px;
            bottom: 10px;
              .watergage {
                width: 130px;
                height: 112px;
              }

            .unit {
              font-weight: 500;
              font-size: 80px;
              position: relative;
              bottom: 24px;
              left: 4px;
              .unit {
                font-weight: 500;
                font-size: 18px;
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                margin-bottom: 6px;
                margin-top: 2px;

              span {
                font-size: 52px;
                font-weight: 400;
                span {
                  font-size: 12px;
                  font-weight: 400;
                }
              }

              .place {
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                font-size: 13px;
                color: #869CC9;
              }
            }

            .place {
            .liquidlevel_wrap {
              position: relative;
              bottom: 10px;
              left: 4px;
              font-size: 44px;
              color: #869CC9;
            }

            .liquidlevel {
              width: 320px;
              height: 420px;
              /* border: 6px solid red; */
              .liquidle_te {
                font-weight: 500;
                font-size: 18px;
                position: absolute;
                top: 99px;
                left: 0;
                width: 206px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .placeT {
                  font-size: 12px;
                  color: #869CC9;
                  margin-top: 6px;
                }
              }

              /* .placeT {
                position: relative;
                bottom: 10px;
                left: 4px;
                font-size: 74px;
                color: #869CC9;
                opacity: 0;
              } */

              .liquidlevel {
                width: 220px;
                height: 400px;
                transform: scale(0.27);
                color: #fff;
                text-align: center;
                position: relative;
                left: -8px;
                top: -143px;
              }
            }
          }


        }
      }

@@ -1372,6 +1514,17 @@
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;

            }

            .acc {
              background-image: -webkit-linear-gradient(top,
                  #ffffff 0%,
                  #c8ddff 66%,
                  #95eefc 72%,
                  #95eefc 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .active {