ll

liukangdong

2024-11-07 b158a9a85078d57a0e660aba680f6ad88da7ab6a

 screen/src/views/FireFighting.vue

@@ -3,7 +3,7 @@
    <div class="main_app">
      <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-消防态势监控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
@@ -31,14 +31,14 @@
                  <span class="item">故障</span>
                  <span class="item">离线</span>
                </div>
                <template v-for="i in 5">
                <template v-for="(item, i) in dataList1" :key="i">
                  <div class="line">
                    <span class="item name">火灶报警系统</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <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>
                  <div class="separate"></div>
                </template>
@@ -54,7 +54,14 @@
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="echart1" id="echart1"></div>
              <div class="item" v-for="(item, i) in dataList2">
                <div class="head">
                  <div class="name">{{ item.name }}</div>
                  <div class="name">{{ item.num }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="item.rate" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
@@ -77,35 +84,35 @@
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="num">1000</div>
                  <div class="num">{{ dataList4.onlineDeviceNum }}</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">12</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">12</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">12</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">12</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum }}</div>
                </div>
              </div>
            </div>
@@ -199,20 +206,26 @@
            </div>
            <div class="content_wrap">
              <div class="list">
                <template v-for="i in 3">
                  <div class="item">
                    <div>已维保</div>
                    <div class="num active">500</div>
                  </div>
                  <div v-if="i < 3" class="separate"></div>
                </template>

                <div class="item">
                  <div>已维保</div>
                  <div class="num active">{{ dataList5.protectNum }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>计划维保</div>
                  <div class="num active">{{ 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>
              </div>
              <div class="footer">
                <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
                <div class="content">
                  <div>本月新增维保</div>
                  <div class="num">40 <span>个</span></div>
                  <div class="num">{{ dataList5.monthAddNum }} <span>个</span></div>
                </div>
              </div>
            </div>
@@ -234,14 +247,14 @@
                <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
                <div class="content">
                  <div class="name">提报隐患数</div>
                  <div class="num"><span>10</span>个</div>
                  <div class="num"><span>{{ dataList4.todayDangerNum }}</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">3</span>个</div>
                  <div class="num"><span class="today">{{ dataList4.dealDangerNum }}</span>个</div>
                </div>
              </div>
            </div>
@@ -270,7 +283,7 @@
                    </div>
                    <div class="title">
                      <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                      <span>address</span>
                      <span>A厂房3车间门口</span>
                    </div>
                  </div>
                </div>
@@ -286,10 +299,17 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
import {
  getFightingalarmData,
  getFightingHandle,
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -302,100 +322,7 @@

}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // 绘制图表
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // 四个数字分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [

      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
@@ -761,9 +688,209 @@
  })
}

const dataList1 = ref([])
const getData1 = () => {
  getFightingDeAlarm().then(res => {
    dataList1.value = res.data
  })
}
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const dataList2 = ref([])
const getData2 = () => {
  getFightingalarmData().then(res => {
    const result = res.data || {}
    let temp = []
    temp.push({ name: '真实报警数', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 })
    temp.push({ name: '误报警数', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 })
    temp.push({ name: '已解除', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
    temp.push({ name: '处理中', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
    dataList2.value = temp
  })
}

const dataList3 = ref([])
const getData3 = () => {
  getFightingHandle({ type: 0 }).then(res => {
    dataList3.value = res.data || []
    initEchart2()
  })
}
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // 生成数据和日期
  // 示例数据
  const data1 = dataList3.value.map(i => i.alarmNum)
  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 option = {
    legend: {
      x: "center",
      textStyle: {
        color: "#FFFFFF", // 图例文字设为白色
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // 更新图例名称
    },
    grid: {
      left: '2%',
      right: '0%',
      top: '20%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      textStyle: {
        color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0,0,0,0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)",
    },
    xAxis: {
      data: dataList3.value.map(i => i.monthStr),
      axisLabel: {
        color: "#FFFFFF", // X 轴文字设为白色
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      show: true,
      axisLabel: {
        color: "#FFFFFF", // Y 轴文字设为白色
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#0f1d27"],
          width: 1
        },
      },
    },
    series: [
      {
        name: "告警数",
        type: "bar",
        stack: "attendance",
        data: data1,
        itemStyle: {
          color: '#FEAF01',
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
        barWidth: 6,
      },
      {
        name: "进行中", // 迟到数据
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // 迟到的颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "已处理", // 请假数据
        type: "bar",
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // 请假的颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // 单独的加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // 高亮的紫色
        },
        emphasis: {
          focus: "series",
        },
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}

const dataList4 = ref({})
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList4.value = res.data || {}
  })
}
const dataList5 = ref({}) // 维保
const getData5 = () => {
  getFightingDeviceY().then(res => {
    dataList5.value = res.data || {}
  })
}
const dataList6 = ref([])
const getData6 = () => {
  getFightingHandle({type: 1}).then(res => {
    dataList6.value = res.data
  })
}

onMounted(() => {
  // initEnergy()
  // initEchart1()
  getData1()
  getData2()
  getData3()
  getData4()
  getData5()
  getData6()

  initWatergage()
  initLiquidlevel()
})
@@ -786,7 +913,6 @@
    .left_box_one {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid;

      .list_wrap {
        padding: 10px 0;
@@ -848,20 +974,26 @@
      margin-bottom: 20px;

      .police_wrap {
        padding: 15px 20px 0;
        height: 225px;

        border: 1px solid;
        .item {
          margin-bottom: 5px;

        .echart1 {
          width: 100%;
          height: 100%;
          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }
        }
      }
    }

    .left_box_three {
      .dispose_wrap {
        border: 1px solid;
        height: 210px;
        width: 100%;

@@ -921,12 +1053,14 @@
                  #dd4c26 50%,
                  #e43724 100%);
            }

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

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
@@ -1039,7 +1173,7 @@
                  font-weight: 500;

                  span {
                    font-style: 14px;
                    font-size: 14px;
                    font-weight: 400;
                  }
                }
@@ -1056,6 +1190,7 @@
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;
@@ -1266,7 +1401,7 @@
        overflow: auto;
        margin-top: 15px;
        scrollbar-width: none;

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