ll

liukangdong

2024-11-29 cb0f941c9c554403c5b75cd27d642683eba8b675

 screen/src/views/FireFighting.vue

@@ -35,12 +35,12 @@
                  <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.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>
                        <span class="item name">{{ item.typeName }}</span>
                        <span class="item">{{ item.totalDeviceNum || 0 }}</span>
                        <span class="item">{{ 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>
@@ -117,7 +117,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>
@@ -253,14 +253,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>
@@ -278,22 +278,28 @@
                  <div class="content">
                    <div class="header">
                      <div class="time">
                        <span>{{ item.time }}</span>
                        <span class="status">处理中</span>
                        <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">已经发生<span>1</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.name }}</span>
                        <span>{{ item.alarmTypeName }}</span>
                      </div>
                      <div class="title">
                        <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                        <span>{{ item.addr }}</span>
                        <span>{{ item.regionName }}</span>
                      </div>
                    </div>
                  </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>
@@ -309,6 +315,8 @@
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'
@@ -318,6 +326,7 @@
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList
} from '@/api'

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

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

const dataList1 = ref([])
const getData1 = () => {
  getFightingDeAlarm().then(res => {
    dataList1.value = res.data
    loopFn1()
  })
}
// const getData1 = () => {
//   getFightingDeAlarm().then(res => {
//     dataList1.value = res.data
//     loopFn1()
//   })
// }
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
  // 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 = []
@@ -737,10 +746,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 => {
    console.log('i.startDate', i.startDate.substring(5, 7))
    return i.startDate.substring(5, 7) + '月'
  }
  )
  const option = {
    legend: {
      x: "center",
@@ -774,10 +788,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: {
@@ -886,6 +900,8 @@
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList4.value = res.data || {}
    dataList1.value = res.data.deviceTypeList
    loopFn1()
  })
}
const dataList5 = ref({}) // 维保
@@ -902,17 +918,25 @@
}
const dataList7 = ref([])
const getData7 = () => {
  dataList7.value = [
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
    { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  ]

  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
    })
  })
  // dataList7.value = [
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  //   { name: '消防告警', addr: '厂区门口', time: '2022-02-02' },
  // ]
  loopFn2()
}

@@ -943,16 +967,40 @@
}

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

    getData5()

  }, 60 * 60 * 1000)


  initWatergage()
  initLiquidlevel()

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


@@ -1468,6 +1516,7 @@
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;

        .item {
          display: flex;
          font-size: 13px;