ll

liukangdong

2024-12-23 37752f6c417b3d9dd13e815413d006e388d76939

 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>
@@ -31,17 +32,22 @@
                  <span class="item">故障</span>
                  <span class="item">离线</span>
                </div>
                <template v-for="(item, i) in dataList1" :key="i">
                  <div class="line">
                    <span class="item name">{{ item.deviceTypeName }}</span>
                    <span class="item">{{ item.statusTotal }}</span>
                    <span class="item">{{ item.alarmNum }}</span>
                    <span class="item">{{ item.shieldNum }}</span>
                    <span class="item">{{ item.errNum }}</span>
                    <span class="item">{{ item.offlineNum }}</span>
                <div class="one-swiper list_content">
                  <div class="swiper-wrapper">
                    <div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1">
                      <div class="line">
                        <span class="item name">{{ item.typeName }}</span>
                        <span class="item">{{ item.totalDeviceNum || 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>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </div>
                  <div class="separate"></div>
                </template>
                </div>

              </div>
            </div>
          </div>
@@ -112,7 +118,7 @@
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum }}</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
                </div>
              </div>
            </div>
@@ -125,9 +131,9 @@
                  <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">
@@ -135,19 +141,19 @@
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</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">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<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">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{ dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
                    </div>
                  </div>
                </div>
@@ -186,9 +192,9 @@
                    <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 class="placeT">阈值</div>
                    </div>

                    <div class="place">阈值 0～4.50M</div>
                  </div>
                </div>
              </div>
@@ -213,12 +219,13 @@
                <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">{{ ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                    ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                </div>
              </div>
              <div class="footer">
@@ -247,14 +254,14 @@
                <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
                <div class="content">
                  <div class="name">提报隐患数</div>
                  <div class="num"><span>{{ dataList4.todayDangerNum }}</span>个</div>
                  <div class="num"><span>{{ dataList4.dangerTotalNum }}</span>个</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
                <div class="content">
                  <div class="name">处理隐患数</div>
                  <div class="num"><span class="today">{{ dataList4.dealDangerNum }}</span>个</div>
                  <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>个</div>
                </div>
              </div>
            </div>
@@ -262,30 +269,38 @@
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">告警信息</div>
            </div>
            <div class="list">
              <div class="item" v-for="i in 5">
                <div class="icon">
                  <div class="circle"></div>
                  <div class="line"></div>
            <div class="list two-swiper">
              <div class="swiper-wrapper">
                <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i">
                  <div class="icon">
                    <div class="circle"></div>
                    <div class="line"></div>
                  </div>
                  <div class="content">
                    <div class="header">
                      <div class="time">
                        <span>{{ item.alarmTime }}</span>
                        <span class="status" v-if="item.handleStatus == 1">已核实</span>
                        <span class="status" v-else-if="item.handleStatus == 2">未核实</span>
                        <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>
                    <div class="wrap">
                      <div class="title">
                        <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                        <span>{{ item.alarmTypeName }}</span>
                      </div>
                      <div class="title">
                        <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                        <span>{{ item.regionName }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content">
                  <div class="header">
                    <div class="time">
                      <span>123</span>
                      <span class="status">处理中</span>
                    </div>
                    <div class="have_time">已经发生<span>1</span>分钟</div>
                  </div>
                  <div class="wrap">
                    <div class="title">
                      <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                      <span>消防警告</span>
                    </div>
                    <div class="title">
                      <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                      <span>A厂房3车间门口</span>
                    </div>
                  </div>
                <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                </div>
              </div>
            </div>
@@ -301,13 +316,19 @@
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
import {
  getFightingalarmData,
  getFightingHandle,
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList,
  getTemperatureHumidityData
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -325,7 +346,7 @@

const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
  var data_value = 1
  const option = {
    barMaxWidth: 3,
    polar: {
@@ -689,14 +710,16 @@
}

const dataList1 = ref([])
const getData1 = () => {
  getFightingDeAlarm().then(res => {
    dataList1.value = res.data
  })
}
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const dataList2 = ref([])
const getData2 = () => {
  // let temp = []
  // temp.push({ name: '真实报警数', num: 10, rate: 20 })
  // temp.push({ name: '误报警数', num: 30, rate: 60 })
  // temp.push({ name: '已解除', num: 20, rate: 40 })
  // temp.push({ name: '处理中', num: 8, rate: 16 })
  // dataList2.value = temp
  // return
  getFightingalarmData().then(res => {
    const result = res.data || {}
    let temp = []
@@ -719,10 +742,15 @@
  var myChart = echarts.init(document.querySelector('.echart2'))
  // 生成数据和日期
  // 示例数据
  const data1 = dataList3.value.map(i => i.alarmNum)
  const data1 = dataList3.value.map(i => i.realNum)
  const data2 = dataList3.value.map(i => i.processingNum)
  const data3 = dataList3.value.map(i => i.liftNum)
  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",
@@ -756,10 +784,10 @@
      borderColor: "rgba(219, 230, 255, 0.8)",
    },
    xAxis: {
      data: dataList3.value.map(i => i.monthStr),
      data: months,
      axisLabel: {
        color: "#FFFFFF", // X 轴文字设为白色
        fontSize: 14,
        fontSize: 13,
      },
      axisLine: {
        lineStyle: {
@@ -868,6 +896,7 @@
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList4.value = res.data || {}
    dataList1.value = res.data.deviceTypeList
  })
}
const dataList5 = ref({}) // 维保
@@ -878,21 +907,95 @@
}
const dataList6 = ref([])
const getData6 = () => {
  getFightingHandle({type: 1}).then(res => {
  getFightingHandle({ type: 1 }).then(res => {
    dataList6.value = res.data
  })
}
const dataList7 = ref([])
const getData7 = () => {
  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分钟')
      return item
    })
  })
}

const dataList8 = ref([])
const dataIndex8 = ref(0)
const getData8 = () => {
  getTemperatureHumidityData().then(res => {
    dataList8.value = res.data || []
  })
}
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 autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
    return { delay: time, disableOnInteraction: false }
  } else {
    return false
  }
}
const loopFn1 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 5,
    autoplay: autoplayFlag(dataList1.value, 5, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 4,
    autoplay: autoplayFlag(dataList7.value, 4, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}

onMounted(() => {
  getData1()
  // getData1()
  getData2()
  getData3()
  getData4()
  getData5()
  getData6()
  // getData6()
  getData7()
  getData8()
  setInterval(() => {
    getData2()
    getData3()
    getData4()
    // getData6()
    getData7()
  }, 60 * 1000)
  setInterval(() => {

    getData5()
    getData8()

  }, 60 * 60 * 1000)

  initWatergage()
  initLiquidlevel()

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

})


@@ -916,8 +1019,15 @@

      .list_wrap {
        padding: 10px 0;
        height: 227px;
        overflow: auto;

        .list_content {
          height: 170px;
          overflow: hidden;

          .line_wrap {
            height: 34px !important;
          }
        }

        .list {
          .line {
@@ -1085,6 +1195,7 @@

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

        .title_wrap {
@@ -1128,8 +1239,9 @@
            }

            .icon {
              width: 13px;
              height: 16px;
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }
@@ -1160,7 +1272,17 @@
            .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;
                height: 70px;
@@ -1190,7 +1312,6 @@
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;
@@ -1239,17 +1360,18 @@
              }
            }

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

            .liquidlevel {
              width: 320px;
              height: 420px;
              width: 300px;
              height: 396px;

            }
          }
@@ -1284,6 +1406,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 {
@@ -1347,7 +1480,7 @@
          margin-right: 7px;
        }
      }
      

      .static_wrap {
        display: flex;
        justify-content: space-evenly;
@@ -1397,8 +1530,8 @@
      }

      .list {
        height: 330px;
        overflow: auto;
        height: 320px;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;

@@ -1406,6 +1539,7 @@
          display: flex;
          font-size: 13px;
          color: #D2E0FF;
          height: 80px !important;

          .icon {
            width: 40px;
@@ -1465,7 +1599,7 @@
            }

            .wrap {
              height: 40px;
              height: 34px;
              background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
              border-radius: 2px 0px 0px 2px;
              display: flex;