ll

liukangdong

2025-02-11 8ac8aa810302c78d18d0b37b155bdbf814ae466f

 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>
@@ -24,24 +25,29 @@
            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <span class="item name">设备类型</span>
                  <span class="item name">设备名称</span>
                  <span class="item">总数</span>
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
                  <span class="item">故障</span>
                  <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.onlineDeviceNum || 0 }}</span>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </div>
                  <div class="separate"></div>
                </template>
                </div>

              </div>
            </div>
          </div>
@@ -83,36 +89,36 @@
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="num">{{ dataList4.onlineDeviceNum }}</div>
                  <div class="name">总数</div>
                  <div class="num">{{ dataList4.onlineDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                <div class="content">
                  <div class="name">报警</div>
                  <div class="num num2">{{ dataList4.alarmDeviceNum }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
                  <div class="num num3">{{ dataList4.errDeviceNum }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
                <div class="content">
                  <div class="name">离线</div>
                  <div class="num num4">{{ dataList4.offlineDeviceNum }}</div>
                  <div class="num num2">{{ dataList4.alarmDeviceNum || 0}}</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 }}</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>
                  <div class="num num3">{{ dataList4.errDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt="">
                <div class="content">
                  <div class="name">正常</div>
                  <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div>
                </div>
              </div>
            </div>
@@ -125,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 }}%</div>
                    </div>
                  </div>
                </div>
@@ -160,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>
@@ -213,12 +222,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 +257,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 +272,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>
@@ -297,17 +315,24 @@
</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'
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,
  monitorDataListP
} from '@/api'

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


const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
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: {
@@ -352,8 +382,8 @@
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        min: minNum,
        max: maxNum,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
@@ -485,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',
@@ -525,7 +563,7 @@
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -543,7 +581,7 @@
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -576,7 +614,7 @@
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
@@ -625,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,
@@ -689,14 +727,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 +759,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 +801,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 +913,7 @@
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList4.value = res.data || {}
    dataList1.value = res.data.deviceTypeList
  })
}
const dataList5 = ref({}) // 维保
@@ -878,21 +924,152 @@
}
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 => {
      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) {
    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()
  setInterval(() => {
    changeData8(1)
    changeData9(1)
  }, 1000 * 5)

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


})


@@ -916,8 +1093,15 @@

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

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

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

        .list {
          .line {
@@ -927,17 +1111,20 @@
            font-size: 14px;

            .item {
              flex: 1;
              flex: 2;
              display: flex;
              justify-content: center;
              /* margin: 0 6px; */
              align-items: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              
            }

            .name {
              flex: 2;
              flex: 5;
              justify-content: flex-start;
            }

            .warnning {
@@ -1056,16 +1243,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 {
@@ -1080,11 +1267,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 {
@@ -1128,8 +1317,9 @@
            }

            .icon {
              width: 13px;
              height: 16px;
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }
@@ -1160,6 +1350,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;
@@ -1185,76 +1387,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;
              }
            }
          }


        }
      }

@@ -1284,6 +1521,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 +1595,7 @@
          margin-right: 7px;
        }
      }
      

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

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

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

          .icon {
            width: 40px;
@@ -1465,7 +1714,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;