优化

MrShi

2025-09-24 0e555ff7887e46c5bdd9d8ca237f7ed1e1634c0f

 screen/src/views/FireFighting.vue

@@ -1,10 +1,11 @@
<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>
        <div class="title">安泰智慧物流园区-智慧消防管控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
@@ -13,187 +14,228 @@
      </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 class="left_box_top">

            <div class="left_box_top_znz">
              <img src="@/assets/images/ic_compass@2x.png" 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 class="left_box_top_left">
              <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="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">{{ 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 class="left_content">
                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>本年消防设备/设施维保情况</span>
                    </div>
                  </div>

                  <div class="content_wrap">
                    <div class="list">
                      <div class="item">
                        <div>已维保</div>
                        <div class="num active">{{ dataList5.protectNum || 0 }}</div>
                      </div>
                      <div class="separate"></div>
                      <div class="item">
                        <div>计划维保</div>
                        <div class="num acc">{{ dataList5.planProtectTotal || 0 }}</div>
                      </div>
                      <div class="separate"></div>
                      <div class="item">
                        <div>维保率</div>
                        <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                          ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                        <div v-else class="acc num">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">{{ dataList5.monthAddNum }} <span>个</span></div>
                      </div>
                    </div>
                  </div>

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>系统设备状态</span>
                    </div>
                  </div>

                  <div class="list_wrap">
                    <div class="list">
                      <div class="header line">
                        <span class="item name" style="color: #FFFFFF;">设备名称</span>
                        <span class="item">总数</span>
                        <span class="item">报警</span>
                        <span class="item">屏蔽</span>
                        <span class="item">故障</span>
                        <span class="item">正常</span>
                      </div>
                      <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>
                    </div>
                    <div class="list_wrap_footer" v-if="dataList1.length > 0">
                      <div class="wrap_footer_item name" style="color: #fff;">总计</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'totalDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'alarmDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'shieldDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'errDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'onlineDeviceNum')}}</div>
                      <div class="separate"></div>
                    </div>
                  </div>
                </div>

              </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="(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">
            <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">{{ 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">{{ 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>
              </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 || 0 }}</div>
            <div class="left_box_top_right">
              <div class="center_box_one">
                <div class="static_wrap">
                  <div class="item">
                    <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                    <div class="content">
                      <div class="name">报警总数</div>
                      <div class="num">{{ dayData.totalNum || 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 num2">{{ dayData.processingNum || 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 num5">{{ dayData.liftNum || 0 }}</div>
                    </div>
                  </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="left_box_bottom">
            <div class="left_box_three">
              <div class="com_header">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                  <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                  <div>消防态势感知</div>
                </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>
                <img src="@/assets/images/title@2x.png" class="bg" alt="" />
              </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 class="bottom_content">

                <div class="bottom_content_left" v-if="dataList8 && dataList8.length > 0">

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>重点区域温度监测</span>
                    </div>
                    <div class="right">
                      <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                           alt="">
                      <div class="num">{{ dataList8[dataIndex8].humidityData.name }}</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 v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>-->
<!--                    </div>-->
                    <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"
                               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"
                               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>
                  </div>

                </div>
                <div class="bottom_content_right">

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>水压水位监测</span>
                    </div>
                    <div class="right">
                      <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_wrap2">
                    <div class="item" v-for="(item, i) in dataListTemp9" :key="i">
                      <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                        <div class="watergage" :id="'watergage' + i"></div>
                      </div>
                      <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                        <img src="@/assets/images/size.png" alt="" class="size" />
                        <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                      </div>
                      <div class="list_wrap2_info">
                        <div class="title">
                          <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                          <span>{{ item.name }}</span>
                        </div>
                        <div class="unit">
                          <span>{{ item.obj.value.substring(0, item.obj.value.indexOf('M')) }}</span>
                          <span>{{ item.obj.value.substring(item.obj.value.indexOf('M'), item.obj.value.length) }}</span>
                        </div>
                        <div class="place">阈值 {{ item.level }}</div>
                      </div>
                    </div>
                    <div class="item1"></div>
                    <div class="item1"></div>
                  </div>
                </div>
              </div>
@@ -205,103 +247,92 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>本年消防设备/设施维保情况</div>
                <div>消防报警闭环管理</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content_wrap">
              <div class="list">
                <div class="item">
                  <div>已维保</div>
                  <div class="num active">{{ dataList5.protectNum }}</div>
            <div class="right_content">
              <div class="tips">
                <div class="tips_title">
                  <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                  <span>
                    <template v-if="dateType === '1'">本月</template>
                    <template v-else-if="dateType === '2'">本年</template>
                    <template v-else>今日</template>报警
                  </span>
                </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 class="tips_cates">
                  <div :class="!dateType ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('')">今日</div>
                  <div class="tips_cates_x">|</div>
                  <div :class="dateType === '1' ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('1')">本月</div>
                  <div class="tips_cates_x">|</div>
                  <div :class="dateType === '2' ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('2')">本年</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">{{ dataList5.monthAddNum }} <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>{{ 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.dangerDealedNum }}</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 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 class="police_wrap">
                <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>
                  <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>
                  <FirePercent :color="policeColors[i]" :rate="item.rate" />
                </div>
              </div>

              <div class="dispose_wrap">
                <div class="tips">
                  <div class="tips_title">
                    <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                    <span>报警趋势</span>
                  </div>
                </div>
                <div class="echart2" id="echart2"></div>
              </div>

              <div class="tips">
                <div class="tips_title">
                  <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                  <span>报警明细</span>
                </div>
              </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="wrap">
                      <div class="title">
                        <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                        <span>{{ item.alarmTypeName }}</span>
                    <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="title">
                        <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                        <span>{{ item.regionName }}</span>
                      <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>
                <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                  <div v-if="dataList7.length == 0" style="margin-top: 50px;" class="empty_wrap">
                    <img src="@/assets/images/default_empty.png" alt="">
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
@@ -311,7 +342,7 @@
</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'
@@ -326,7 +357,9 @@
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList
  getFighalarmDataList,
  getTemperatureHumidityData,
  monitorDataListP
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -334,6 +367,7 @@
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
var dateType = ref('')
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
@@ -342,18 +376,31 @@
}, 1000)


const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 1
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 = item.max
  let minNum = item.min
  // let maxNum =
  const option = {
    barMaxWidth: 3,
    mapLocation: {
      x: '0',
      y: '0',
      width: '100%',
      height: '100%'
    },
    polar: {
      radius: '80%'
    },
    grid: {
      top: '0%',
      left: '0%',
      right: '%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
@@ -371,8 +418,8 @@
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        min: minNum,
        max: maxNum,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
@@ -504,9 +551,24 @@
    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 maxNum = item.max
  let minNum = item.min
  let conNum = maxNum
  let acNum = item.obj.value.replaceAll('M', '')
  var data = 0
  if (acNum > conNum) {
    data = 100
  } else{
    data = ((acNum / conNum) * 100).toFixed(0)
  }
  console.log('data', data)

  const option = {
    tooltip: {
      trigger: 'none',
@@ -544,7 +606,7 @@
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -562,7 +624,7 @@
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -595,7 +657,7 @@
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
@@ -644,9 +706,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,
@@ -708,23 +770,25 @@
}

const dataList1 = ref([])
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const policeColors = ['#FE5501', '#01D9FE', '#01FE9D', '#FFF306']
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 dayData = ref([])

const getDayData = () => {
  getFightingalarmData().then(res => {
    dayData.value = res.data || {}
  })
}

const getData2 = (type) => {
  dateType.value = type
  getFightingalarmData({ type: dateType.value }).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.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
    temp.push({ name: '未处理', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
    temp.push({ name: '正报警数', num: result.liftNum - result.errNum, rate: ((result.liftNum - result.errNum) / 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
  })
}
@@ -738,29 +802,28 @@
}
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // 生成数据和日期
  // 示例数据
  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",
      x: "right",
      textStyle: {
        color: "#FFFFFF", // 图例文字设为白色
        color: "#FFFFFF",
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      top: '0',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // 更新图例名称
      data: ['报警数', '未处理', '已处理']
    },
    grid: {
      left: '2%',
@@ -788,7 +851,7 @@
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
          color: '#D2E0FF'
        }
      },
      axisTick: {
@@ -803,7 +866,7 @@
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
          color: '#D2E0FF'
        }
      },
      axisTick: {
@@ -821,7 +884,7 @@
    },
    series: [
      {
        name: "告警数",
        name: "报警数",
        type: "bar",
        stack: "attendance",
        data: data1,
@@ -838,12 +901,12 @@
        barWidth: 6,
      },
      {
        name: "进行中", // 迟到数据
        name: "未处理", // 迟到数据
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // 迟到的颜色
          color: '#FE5501', // 迟到的颜色
        },
        label: {
          show: false,
@@ -859,7 +922,7 @@
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // 请假的颜色
          color: '#01D9FE', // 请假的颜色
        },
        label: {
          show: false,
@@ -868,19 +931,7 @@
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // 单独的加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // 高亮的紫色
        },
        emphasis: {
          focus: "series",
        },
      },
      }
    ],
  }
  myChart.setOption(option)
@@ -913,11 +964,85 @@
  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分钟')
      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 / 4)
      dataListTemp9.value = dataList9.value.slice(0, 4)
    }
    console.log(dataListTemp9.value)
    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, 4)
  } else if (dataIndex9.value == 0 && num < 0) {
    dataIndex9.value = dataTotal9.value - 1
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 4, dataList9.value.length)
  } else {
    dataIndex9.value = dataIndex9.value + num
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 4, (dataIndex9.value + 1) * 4)
  }
  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) {
@@ -926,6 +1051,13 @@
    return false
  }
}

const sum = (array, field) => {
  return array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue[field];
  }, 0);
}

const loopFn1 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
    initialSlide: 0,
@@ -939,49 +1071,99 @@
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 4,
    autoplay: autoplayFlag(dataList7.value, 4, 4000),
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList7.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}

onMounted(() => {
  // getData1()
  getDayData()
  getData2()
  getData3()
  getData4()
  getData5()
  // 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 * 10)
  setTimeout(() => {
    loopFn1()
    loopFn2()
  }, 12000)
  
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.tips {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tips_title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 30px;
    img {
      width: 17px;
      height: 17px;
      margin-right: 7px;
    }
    span {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
    }
  }
  .tips_cates {
    display: flex;
    align-items: center;
    .tips_cates_row {
      font-weight: 600;
      font-size: 14px;
      color: #D2E0FF;
      cursor: pointer;
    }
    .tips_cates_x {
      margin: 0 8px;
      font-weight: 600;
      font-size: 14px;
      color: #D2E0FF;
    }
    .active {
      color: #0094EB !important;
    }
  }
  .right {
    display: flex;
    align-items: center;

    .num {
      margin: 0 5px;
    }

    .icon {
      width: 30px;
      cursor: pointer;
      /* height: 16px; */
    }
  }
}

.main_content {
@@ -989,106 +1171,482 @@
  padding: 20px 25px 0;

  .left_box {
    width: 450px;
    /*width: 450px;*/
    flex: 1;
    margin-right: 20px;

    .left_box_one {
    .left_box_top {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
      align-items: start;
      position: relative;

      .list_wrap {
        padding: 10px 0;
      .left_box_top_znz {
        width: 68px;
        height: 68px;
        position: absolute;
        right: 0;
        top: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }

        .list_content {
          height: 170px;
          overflow: hidden;
      .left_box_top_left {
        width: 450px;
        flex-shrink: 0;

          .line_wrap {
            height: 34px !important;
        .left_box_one {
          width: 100%;
          margin-bottom: 20px;

          .left_content {
            width: 100%;
            height: 549px;
            padding: 20px;
            box-sizing: border-box;
            background: rgba(255,255,255,0.03);

            .list_wrap {
              padding: 10px 0;

              .list_wrap_footer {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                position: relative;
                .separate {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  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;
                }
                .wrap_footer_item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex: 2;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .name {
                  flex: 5;
                  color: #00F2F3;
                }
              }

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

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

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

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

                  }

                  .name {
                    flex: 5;
                    color: #00F2F3;
                  }

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

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

                  }

                  .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 {
                    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;
                    }
                  }
                }
              }
            }

          }

        }
      }
      .left_box_top_right {
        flex: 1;

        .center_box_one {
          width: 100%;
          padding: 0 120px;
          box-sizing: border-box;
          .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-weight: bold;
                  font-size: 30px;
                  margin-right: 5px;
                  background-image: -webkit-linear-gradient(top,
                    rgba(254, 113, 1, 1) 0%,
                    rgba(239, 202, 16, 1) 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
                .num2 {
                  background-image: -webkit-linear-gradient(top,
                          #fff 0%,
                          #dd4c26 50%,
                          #e43724 100%);
                }
                .num5 {
                  background-image: -webkit-linear-gradient(top,
                          rgba(1, 217, 254, 1) 0%,
                          rgba(1, 254, 242, 1) 100%);
                }
              }
            }
          }
        }
      }
    }

        .list {
          .line {
            display: flex;
            height: 32px;
            align-items: center;
            font-size: 14px;
    .left_box_bottom {
      width: 100%;
      display: flex;
      flex-direction: column;

            .item {
              flex: 1;
      .bottom_content {
        width: 100%;
        height: 168px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255,255,255,0.03);

        .bottom_content_left {
          width: 435px;
          height: 100%;
          padding: 20px;
          box-sizing: border-box;

          .list_wrap {
            width: 100%;
            height: 64px;
            margin-top: 20px;

            .list {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
              justify-content: space-evenly;

            .name {
              flex: 2;
            }
              .item {
                display: flex;
                align-items: center;
                position: relative;

            .warnning {
              color: #FEAF01;
            }
          }
                .place {
                  position: absolute;
                  top: 120px;
                  right: 70px;
                  z-index: 999;
                  font-size: 13px;
                  color: #869CC9;
                  width: 120px;
                  text-align: center;
                }

          .header {
            background: rgba(134, 156, 201, 0.1);
            font-weight: 500;
                .icon {
                  width: 70px;
                  height: 70px;
                  margin-right: 10px;
                }

            .item {
              border-right: 1px solid rgba(255, 255, 255, 0.2);
                .content {
                  .num {
                    font-size: 28px;
                    font-weight: 500;

              &:nth-last-child(1) {
                border: none;
                    span {
                      font-size: 14px;
                      font-weight: 400;
                    }
                  }

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

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

        .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 {
        height: 210px;
        width: 100%;

        .echart2 {
          width: 100%;
        .bottom_content_right {
          flex: 1;
          height: 100%;
          padding: 20px;
          box-sizing: border-box;

          .list_wrap2 {
            display: flex;
            align-items: center;
            height: 85px;

            .item1 {
              width: 50%;
              height: 0;
            }
            .item {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              position: relative;

              .list_wrap2_info {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                  display: flex;
                  align-items: start;
                  color: #D2E0FF;

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

                  span {
                    font-weight: 400;
                    font-size: 14px;
                    color: #D2E0FF;
                  }
                }

                .unit {
                  bottom: 16px;
                  left: 4px;
                  width: 130px;
                  margin-bottom: 6px;
                  margin-top: 2px;

                  span {
                    font-weight: 500;
                    color: #FFFFFF;

                    &:nth-child(1) {
                      font-size: 20px;
                    }
                    &:nth-child(2) {
                      font-size: 13px;
                    }
                    /*font-size: 12px;*/
                    /*font-weight: 400;*/
                  }
                }

                .place {
                  bottom: 16px;
                  left: 4px;
                  width: 130px;
                  font-size: 13px;
                  color: #869CC9;
                }
              }
              .watergage_wrap {
                flex-shrink: 0;
                width: 100px;
                height: 85px;
                text-align: center;
                position: relative;

                .watergage {
                  width: 100px;
                  height: 85px;
                }


              }
              .liquidlevel_wrap {
                width: 100px;
                height: 85px;
                position: relative;

                .size {
                  width: 13px;
                  height: 84px;
                  position: absolute;
                  top: 3px;
                  right: 20px;
                }

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

                .liquidlevel {
                  width: 220px;
                  height: 400px;
                  color: #fff;
                  transform: scale(0.24);
                  text-align: center;
                  left: -70px;
                  top: -154px;
                }
              }
            }
          }

        }

      }
    }
  }
@@ -1100,251 +1658,12 @@
    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%;
      width: 108%;
      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-size: 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;

            }
          }


        }
      }
      margin: 0 -4%;

    }
  }
@@ -1353,247 +1672,180 @@
    width: 450px;

    .right_box_one {
      .content_wrap {
        height: 176px;
      width: 100%;

      .right_content {
        width: 100%;
        height: 775px;
        padding: 20px;
        box-sizing: border-box;
        background: rgba(255,255,255,0.03);

        .list {
          display: flex;
          align-items: center;
          height: 240px;
          overflow: hidden;
          margin-top: 15px;
          scrollbar-width: none;

          .item {
            height: 116px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            color: #D2E0FF;
            height: 68px !important;

            .num {
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;
            }
            .icon {
              width: 40px;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding-top: 10px;

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

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              .line {
                margin-top: 3px;
                width: 1px;
                flex: 1;
                background-color: #153947;
              }
            }
          }
        }
      }

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

        .item {
          display: flex;
          font-size: 13px;
          color: #D2E0FF;
          height: 80px !important;

          .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;
            .content {
              flex: 1;
              background-color: #153947;

              .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: 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;
                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;
                }
              }
            }
          }
        }

        .dispose_wrap {
          height: 210px;
          width: 100%;
          position: relative;

          .tips {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            top: 0;
            left: 0;
            .tips_title {
              display: flex;
              align-items: center;
              img {
                width: 17px;
                height: 17px;
                margin-right: 7px;
              }
              span {
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
              }
            }
          }

          .content {
            flex: 1;
          .echart2 {
            width: 100%;
            height: 100%;
          }
        }

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

          .item {
            margin-bottom: 5px;

            .head {
              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: 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;
              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;
              }
              font-size: 16px;
              color: #FFFFFF;
              margin-bottom: 8px;
            }
          }
        }

      }
    }
  }
@@ -1733,4 +1985,4 @@
  object-fit: cover;
  z-index: -1;
}
</style>
</style>