Merge remote-tracking branch 'origin/master'

jiangping

2024-10-28 6bd673610b45c8b7af056d296dde17585c886586

 screen/src/views/FireFighting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1595 @@
<template>
  <v-scale-screen width="1920" height="960">
    <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="" />
        <div class="title">安泰智慧物流园区-消防态势监控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日各系统设备状态及告警数</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <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>
                </div>
                <template v-for="i in 5">
                  <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>
                  </div>
                  <div class="separate"></div>
                </template>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>报警信息</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="item" v-for="(ind, i) in 4">
                <div class="head">
                  <div class="name">真实报警数</div>
                  <div class="name">{{ i }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="40" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>告警处理分析</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="dispose_wrap">
              <div class="echart2" id="echart2"></div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="num">1000</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>
              </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>
              </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>
              </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>
              </div>
            </div>
          </div>
          <div class="center_box_two">
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <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="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                </div>
                <div class="list">
                  <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>
                  </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>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <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="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title_wrap">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>1è·¯/水压</span>
                  </div>
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>2è·¯/液位</span>
                  </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>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box">
          <div class="right_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>本年消防设备/设施维保情况</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </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>
              <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>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日隐患/告警</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">隐患随手拍</div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <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>
              </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>
              </div>
            </div>
            <div class="su_title">
              <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>
                <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>address</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // ç”Ÿæˆæ•°æ®å’Œæ—¥æœŸ
  function getLastSevenDays() {
    const days = []
    const today = new Date()
    for (let i = 10; i >= 0; i--) {
      days.push(`${i + 1}月`) // æ ¼å¼åŒ–日期为 "X月X日"
    }
    return days
  }

  // ç¤ºä¾‹æ•°æ®
  const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // å‡†æ—¶
  const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // è¿Ÿåˆ°
  const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // è¯·å‡
  const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // åŠ ç­
  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: '18%',
      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: getLastSevenDays(), // ä½¿ç”¨è¿‘七天日期
      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 policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
  const option = {
    barMaxWidth: 3,
    polar: {
      radius: '80%'
    },
    grid: {
      top: '0%',
      left: '0%',
      right: '%',
      bottom: '0%',
      containLabel: true
    },
    angleAxis: {
      show: false,
      max: (360 * 100) / 270,
      type: 'value',
      startAngle: 225,
    },
    radiusAxis: {
      show: false,
      type: 'category',
      z: 10
    },
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
        data: [data_value],
        detail: {
          formatter: (v) => v + '%',
          color: '#152435',
          fontSize: 1,

        },
        itemStyle: {
          color: '#3DE6FF'
        },
        pointer: {
          width: 2,
          length: '90%',
          offsetCenter: [0, '3%'],
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 0,
            color: [
              [0.05, '#1b6dff'],
              [0.10, '#2084ff'],
              [0.15, '#2596ff'],
              [0.20, '#2db0ff'],
              [0.25, '#31c0ff'],
              [0.30, '#36d3ff'],
              [0.35, '#4fe6ec'],
              [0.40, '#6ae7d2'],
              [0.45, '#84e8b9'],
              [0.50, '#a5e999'],
              [0.55, '#ccea75'],
              [0.60, '#f8eb4a'],
              [0.65, '#ffdd4f'],
              [0.70, '#ffcb5a'],
              [0.75, '#ffae6e'],
              [0.80, '#ff9c7b'],
              [0.85, '#ff8d87'],
              [0.90, '#ff7d91'],
              [0.95, '#ff6f9b'],
              [1, '#ff5ca9']
            ]

          }
        },
        axisTick: {
          show: true,
          length: 3,
          splitNumber: 12,
          lineStyle: {
            width: 1,
            color: 'auto',
          },
        },
        axisLabel: {
          distance: 12,
          fontSize: 8,
          color: 'auto',
        },
        splitLine: {
          show: true,
          length: -5,
          lineStyle: {
            width: 1,
            color: 'auto',
          }
        },
        z: 9,
      },
      {
        type: 'bar',
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        data: [
          {
            value: 100,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#0A5EFF' },
                { offset: 0.45, color: '#20DDFF' },
                { offset: 1, color: '#FC10CB' }
              ])
            }
          }
        ],
        z: 3,
      },
      {
        type: 'pie',
        radius: ['2%', '6%'],
        center: ['50%', '50%'],
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: '#3DE6FF',
              opacity: 0.5
            }
          }
        ],
        z: 2,
      },
      {
        type: 'pie',
        radius: 4,
        labelLine: {
          show: false
        },
        data: [
          {
            value: 20,
            itemStyle: {
              color: '#3DE6FF'
            }
          }
        ],
        z: 1,
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initLiquidlevel = () => {
  const myChart = echarts.init(document.getElementById('liquidlevel'))
  var data = 65
  const option = {
    tooltip: {
      trigger: 'none',
    },
    xAxis: {
      data: ['百分比'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035',
        },
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: 'rgba(8,44,110, 1)',
          },
        },
        data: [
          {
            value: 100,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 1,
                  // color: '#03C7F922',
                  color: 'rgb(8,44,110)',
                },
              ]),
            shadowColor: '#03C7F9',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 4,
          },
        },
        data: [
          {
            value: data,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 0.9,
                  // color: '#03C7F922',
                  color: 'rgba(8,44,110, 0.85)',
                },
              ]),
            // shadowColor: '#03C7F9',
            // shadowBlur: 30,
            // shadowOffsetX: 0,
            // shadowOffsetY: -10,
          },
        },
        data: [100 - data],
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            // color: 'rgba(8,44,110, 0.94)',
            color: () =>
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(18,85,213,0.77)',
                },
                {
                  offset: 1,
                  color: 'rgba(8,44,110, 0.77)',
                },
              ]),
            opacity: 0.77,
          },
        },
        label: {
          distance: 15,
          show: true,
          position: data > 58 ? 'inside' : 'top',
          formatter: '{c}' + '%',
          fontSize: 80,
          color: '#1AFCFF',
          textShadowColor: '#03C7F9',
          textShadowBlur: 30,
          textShadowOffsetX: 5,
          textShadowOffsetY: 10,
        },

        silent: true,
        barWidth: 250,
        barGap: '-100%', // Make series be overlap
        data: [data],
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: '#47C8FF77',
                },
                {
                  offset: 0.05,
                  color: '#47C8FF44',
                },
                {
                  offset: 0.15,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.85,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.95,
                  color: '#47C8FF44',
                },
                {
                  offset: 1,
                  color: '#47C8FF77',
                },
              ]),
          },
        },
        silent: true,
        barWidth: 300,
        barGap: '-100%', // Make series be overlap
        data: [100 - data],
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

onMounted(() => {
  initEchart2()
  initWatergage()
  initLiquidlevel()
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 450px;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid;

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

        .list {
          .line {
            display: flex;
            height: 32px;
            align-items: center;
            font-size: 14px;

            .item {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .name {
              flex: 2;
            }

            .warnning {
              color: #FEAF01;
            }
          }

          .header {
            background: rgba(134, 156, 201, 0.1);
            font-weight: 500;

            .item {
              border-right: 1px solid rgba(255, 255, 255, 0.2);

              &:nth-last-child(1) {
                border: none;
              }
            }
          }

          .separate {
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.2);
            /* background-color: red; */
            border-right: 4px solid #00F2F3;
            border-left: 4px solid #00F2F3;
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

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

        .item {
          margin-bottom: 5px;

          .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%;

        .echart2 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .center_box_one {
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 54px;

        .item {
          display: flex;

          img {
            width: 61px;
            height: 63px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              font-weight: bold;
              font-size: 30px;
              margin-right: 5px;
              font-weight: 600;
              background-image: -webkit-linear-gradient(top,
                  #01D9FE 0%,
                  #01D9FE 60%,
                  #fff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .num2 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #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%,
                  #9e9e9e 50%,
                  #9e9e9e 100%);
            }

            .num5 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #3a83f5 50%,
                  #3a83f5 100%);
            }
          }
        }
      }
    }

    .center_box_two {
      width: 100%;
      display: flex;

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

        .title_wrap {
          display: flex;

          .title {
            flex: 1;
          }
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          text-shadow: 0px 2px 8px #01ABFE;
          margin-bottom: 20px;

          .left {
            display: flex;
            align-items: center;

            .icon {
              width: 14px;
              height: 28px;
              margin-right: 10px;
            }
          }

          .right {
            display: flex;
            align-items: center;

            .num {
              margin: 0 40px;
            }

            .icon {
              width: 13px;
              height: 16px;
            }
          }
        }

        .list_wrap {
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .title {
            height: 46px;
            display: flex;
            align-items: center;
            color: #D2E0FF;
            padding-left: 20px;

            .icon {
              width: 16px;
              margin-right: 8px;
            }
          }

          .list {
            height: 160px;
            display: flex;
            justify-content: space-evenly;

            .item {
              display: flex;
              align-items: center;

              .icon {
                width: 70px;
                height: 70px;
                margin-right: 10px;
              }

              .content {
                .num {
                  font-size: 28px;
                  font-weight: 500;

                  span {
                    font-style: 14px;
                    font-weight: 400;
                  }
                }

                .la {
                  font-size: 13px;
                  color: #869CC9;
                }
              }
            }
          }

          .watergage_wrap {
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;
            }

            .unit {
              font-weight: 500;
              font-size: 18px;
              position: relative;
              bottom: 16px;
              left: 4px;

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

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

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

            .unit {
              font-weight: 500;
              font-size: 80px;
              position: relative;
              bottom: 24px;
              left: 4px;

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

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

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

            }
          }


        }
      }

    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      .content_wrap {
        height: 176px;

        .list {
          display: flex;
          align-items: center;

          .item {
            height: 116px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .num {
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;
            }

            .active {
              color: #00F2F3;
            }
          }

          .separate {
            width: 1px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.21);
          }
        }

        .footer {
          display: flex;

          .icon {
            width: 40px;
            height: 41px;
            margin-right: 2px;
          }

          .content {
            flex: 1;
            font-size: 16px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
            border: 1px solid;
            border-image: linear-gradient(270deg, rgba(1, 217, 254, 0), rgba(1, 217, 254, 0.6)) 1 1;

            .num {
              font-size: 20px;
              font-weight: bold;

              span {
                font-size: 13px;
                color: #869CC9;
              }
            }
          }
        }
      }
    }

    .right_box_two {
      .su_title {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        margin: 20px;

        .icon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }
      }

      .static_wrap {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 110px;

        .item {
          display: flex;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
            margin-right: 8px;
          }

          .content {
            font-size: 14px;

            .num {
              font-size: 12px;
              color: #D2E0FF;
              margin-top: 8px;

              span {
                font-weight: bold;
                font-size: 24px;
                margin-right: 4px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

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

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

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

          .icon {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;

            .circle {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: #01D9FE;
              box-shadow: 0px 0px 1px 4px #34788f;
              /* opacity: 0.52; */
            }

            .line {
              margin-top: 3px;
              width: 1px;
              flex: 1;
              background-color: #153947;
            }
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .time {
                display: flex;
                align-items: center;

                .status {
                  height: 18px;
                  line-height: 18px;
                  border-radius: 2px;
                  padding: 2px 4px;
                  border: 1px solid #869CC9;
                  font-size: 12px;
                  margin-left: 8px;
                }
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

                span {
                  color: #FEAF01;
                }
              }
            }

            .wrap {
              height: 40px;
              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;
              align-items: center;
              border: 1px solid;
              margin-bottom: 20px;
              margin-top: 8px;
              padding: 0 10px;
              border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

              .title {
                flex: 4;
                font-weight: bold;
                font-size: 15px;
                color: #FFFFFF;
                display: flex;
                align-items: center;

                span {
                  margin-left: 4px;
                }

                .xf {
                  width: 14px;
                  height: 14px;
                }

                .addr {
                  width: 12px;
                  height: 12px;
                }
              }

              .address {
                flex: 6;
              }
            }
          }
        }
      }
    }
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 130px;
      display: flex;
      justify-content: flex-end;
      font-size: 30px;
    }

    .week {
      margin-left: 20px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>