From 38570b55a9dfdcfd79b3b72e13205c11a5304ca2 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期日, 28 九月 2025 15:22:17 +0800
Subject: [PATCH] 优化

---
 screen/src/views/SecurityControl.vue | 2398 +++++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 1,751 insertions(+), 647 deletions(-)

diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue
index 5bd8fd1..b16eb42 100644
--- a/screen/src/views/SecurityControl.vue
+++ b/screen/src/views/SecurityControl.vue
@@ -2,9 +2,10 @@
   <v-scale-screen width="1920" height="960">
     <div class="main_app">
       <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" />
+      <img src="@/assets/images/ic_compass@2x.png" class="main_znz" alt="" />
       <div class="main_header">
-        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
-        <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-瀹夐槻鏅鸿兘鐩戞祴</div>
+        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
+        <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-鏅鸿兘瀹夐槻绠℃帶</div>
         <div class="time_wrap">
           <span class="date">{{ date }}</span>
           <span class="week">{{ week }}</span>
@@ -17,146 +18,318 @@
             <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="" />
+              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
             </div>
             <div class="second_title">
               <div class="title">
                 <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
-                <div>瀹炴椂鍥尯杞﹁締</div>
+                <div>瀹炴椂鍦ㄥ洯浜哄憳鍒嗗竷</div>
               </div>
               <div class="num_wrap">
-                <div class="la">鎬昏溅浣嶏細</div>
-                <div class="val">100</div>
+                <div class="la">鍗曚綅锛氫汉</div>
               </div>
             </div>
-            <div class="stall_static">
-              <div class="residue">
-                <div class="la">鍓╀綑杞︿綅</div>
-                <div class="val">50</div>
-              </div>
-              <div class="total">
-                <div class="la">杞︿綅鎬绘暟</div>
-                <div class="val">50</div>
-              </div>
-              <div class="rate">
-                <div class="la">
-                  <span>杞︿綅浣跨敤鐜�</span>
-                  <span class="num">50%</span>
-                </div>
-                <div class="val">
-                  <Percent :rate="50" />
-                </div>
-              </div>
+            <div class="ren_chat">
+              <div class="ren_chat_val"></div>
             </div>
-            <div class="second_title">
-              <div class="title">
-                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
-                <div>褰撳墠鍦ㄥ洯绉佸杞﹀垎甯�</div>
-              </div>
-            </div>
-            <div class="private_car">
-              <div class="item">
-                <div class="name">鍛樺伐杞﹁締</div>
-                <div class="num">20</div>
-              </div>
-              <div class="item">
-                <div class="name">鐩稿叧鏂硅溅杈�</div>
-                <div class="num num2">20</div>
-              </div>
-              <div class="item">
 
-                <div class="name">鏉ヨ杞﹁締</div>
-                <div class="num num3">20</div>
-              </div>
-            </div>
-            <div class="section">
-              <div class="item"></div>
-              <div class="item"></div>
-              <div class="item"></div>
-            </div>
-            <div class="second_title">
+            <div class="second_title" style="margin-bottom: 0; margin-top: 15px;">
               <div class="title">
                 <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
-                <div>褰撳墠鍦ㄥ洯璐ц溅鍒嗗竷</div>
+                <div>璁垮婊炵暀鎯呭喌</div>
               </div>
             </div>
-            <div class="car_static">
-              <div class="echart_wrap">
-                <div class="pie_text">
-                  <div class="fs30"><strong>300</strong></div>
-                  <div>璐ц溅</div>
-                </div>
-                <div class="echart" id="echart1"></div>
+            <div class="table">
+              <div class="line header">
+                <div>濮撳悕</div>
+                <div class="dept">鎷滆閮ㄩ棬</div>
+                <div class="time">瓒呮椂鏃堕暱</div>
               </div>
-              <div class="list">
-                <div class="item">
-                  <div class="line">
-                    <div :style="{ background: colors[0] }" class="icon"></div>
-                    <div class="text">鍐呰繍杞﹁締</div>
+              <div style="width: 100%; height: 96px; overflow: hidden;">
+                <div v-if="dataList3.length > 0" class="three-swiper list">
+                  <div class="swiper-wrapper">
+                    <div class="item three-swiper-slide swiper-slide" v-for="(item, index) in dataList3" :key="index">
+                      <div class="line">
+                        <div>{{ item.name }}</div>
+                        <div class="dept">{{ item.companyName }}</div>
+                        <div class="time">{{ item.timeOutMinuteT }}</div>
+                      </div>
+                      <div class="separate"></div>
+                    </div>
                   </div>
-                  <div :style="{ color: colors[0] }" class="num">100</div>
                 </div>
-                <div class="item">
-                  <div class="line">
-                    <div :style="{ background: colors[1] }" class="icon"></div>
-                    <div class="text">澶栧崗杩愯緭杞﹁締</div>
-                  </div>
-                  <div :style="{ color: colors[1] }" class="num">100</div>
+                <div v-if="dataList3.length == 0" class="empty_wrap">
+                  <img style="width: 90px; height: 90px;" src="@/assets/images/default_empty.png" alt="">
                 </div>
-                <div class="item">
-                  <div class="line">
-                    <div :style="{ background: colors[2] }" class="icon"></div>
-                    <div class="text">甯傚叕鍙稿嵏璐ц溅杈�</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="safe_warning">
+<!--            <Loading v-if="loading1" />-->
+            <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/task/title@2x.png" class="bg" alt="" />
+            </div>
+            <div class="safe_warning_content">
+              <div class="second_title">
+                <div class="title">
+                  <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+                  <div>褰撳墠鍦ㄥ洯杞﹁締鍒嗗竷</div>
+                </div>
+                <div class="num_wrap">
+                  <div class="la">鍗曚綅锛氳締</div>
+                </div>
+              </div>
+
+              <div class="safe_chat">
+                <div class="safe_chat_val_n">
+                  <span>{{totalCar}}</span>
+                  <span>鎬绘暟</span>
+                </div>
+                <div id="safe_chat_val"></div>
+                <div class="safe_chat_info">
+                  <div class="safe_chat_info_row" v-for="(item, index) in CarList" :key="index">
+                    <div class="safe_left">
+                      <div class="safe_left_dian" :style="{ backgroundColor: item.color }"></div>
+                      <div class="safe_left_name">{{item.name}}</div>
+                    </div>
+                    <div class="safe_num" :style="{ color: item.color }">{{item.total}}</div>
                   </div>
-                  <div :style="{ color: colors[2] }" class="num">100</div>
+<!--                  <div class="safe_chat_info_row">-->
+<!--                    <div class="safe_left">-->
+<!--                      <div class="safe_left_dian" style="background-color: #28F0C4;"></div>-->
+<!--                      <div class="safe_left_name">绉佸杞﹁締</div>-->
+<!--                    </div>-->
+<!--                    <div class="safe_num" style="color: #28F0C4;">36</div>-->
+<!--                  </div>-->
+<!--                  <div class="safe_chat_info_row">-->
+<!--                    <div class="safe_left">-->
+<!--                      <div class="safe_left_dian" style="background-color: #FEAF01;"></div>-->
+<!--                      <div class="safe_left_name">鍏姟杞﹁締</div>-->
+<!--                    </div>-->
+<!--                    <div class="safe_num" style="color: #FEAF01;">36</div>-->
+<!--                  </div>-->
+<!--                  <div class="safe_chat_info_row">-->
+<!--                    <div class="safe_left">-->
+<!--                      <div class="safe_left_dian" style="background-color: #EEF028;"></div>-->
+<!--                      <div class="safe_left_name">璁垮杞﹁締</div>-->
+<!--                    </div>-->
+<!--                    <div class="safe_num" style="color: #EEF028;">36</div>-->
+<!--                  </div>-->
+                </div>
+              </div>
+              <div class="safe_zhu">
+                <div class="safe_zhu_item">
+                  <div class="safe_zhu_item_label">澶栧崗璐ц繍杞﹁締</div>
+                  <div class="safe_zhu_item_c">
+                    <div class="safe_zhu_item_c_t">
+                      <span>鎬昏溅浣嶏細{{data.outHyLotTotal || 0}}</span>
+                      <span>鍓╀綑杞︿綅锛歿{data.outHyLotTotal - data.relatedJobCarTotal || 0}}</span>
+                    </div>
+                    <div class="safe_zhu_item_c_b">
+                      <div class="safe_zhu_item_c_b_z" :style="{width: ((data.outHyLotTotal - data.relatedJobCarTotal) / data.outHyLotTotal * 100) +'%'}"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="safe_zhu_item">
+                  <div class="safe_zhu_item_label">鍋滆溅鍦�</div>
+                  <div class="safe_zhu_item_c">
+                    <div class="safe_zhu_item_c_t">
+                      <span>鎬昏溅浣嶏細{{data.parkingLotTotal || 0}}</span>
+                      <span>鍓╀綑杞︿綅锛歿{data.freeParkingLot || 0}}</span>
+                    </div>
+                    <div class="safe_zhu_item_c_b">
+                      <div class="safe_zhu_item_c_b_z" :style="{width: (data.freeParkingLot / data.parkingLotTotal * 100) +'%'}"></div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div class="center_box">
-          <div class="center_box_one">
+          <div v-show="showJk" class="jiankong">
+            <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt="">
+            <div class="content">
+              <Video v-if="showJk && activeMenu && activeMenu.indexCode" :href="data.videoPluginUrl"
+                :indexCode="activeMenu.indexCode" />
+              <!-- <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div> -->
+            </div>
+            <div class="right_wrap">
+              <div class="menus">
+                <div class="search_wrap">
+                  <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt="">
+                  <input v-model="dataValue5" @blur="getData5" @keyup.enter="getData5" class="input" type="text"
+                    placeholder="鎼滅储鐩戞帶鍚嶇О">
+                </div>
+                <div class="menu_wrap">
+                  <div class="menu" v-for="(menu, i) in data5" :key="i">
+                    <div class="menu_name" @click="menuClick(i)">
+                      <div class="name">{{ menu.name }}</div>
+                      <img v-if="activeJkIndex == i" class="open" src="@/assets/images/SecurityControl/ar_close@2x.png"
+                        alt="">
+                      <img v-else class="icon" src="@/assets/images/SecurityControl/ar_open@2x.png" alt="">
+                    </div>
+                    <div v-if="activeJkIndex == i" class="list">
+                      <div class="item" @click="menuItemClick(item)" v-for="item in menu.carmeraList">
+                        <img v-if="activeMenu.indexCode == item.indexCode" class="icon"
+                          src="@/assets/images/SecurityControl/ic_jiankong_sel@2x.png" alt="">
+                        <img v-else class="icon" src="@/assets/images/SecurityControl/ic_jiankon.png" alt="">
+                        <span :class="{ active: activeMenu.indexCode == item.indexCode }">{{ item.name }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+          <div v-show="!showJk" class="center_box_one">
             <div class="list">
               <div class="item">
                 <div class="name_wrap">
-                  <div class="name">褰撳墠鍦ㄥ洯浜烘暟</div>
+                  <div class="name">瀹炴椂鍦ㄥ洯浜烘暟</div>
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">200</div>
+                  <div class="num">{{ data.inParkTotal || 0 }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
               <div class="item">
                 <div class="name_wrap">
-                  <div class="name">褰撳墠鍦ㄥ洯杞﹁締鏁�</div>
+                  <div class="name">瀹炴椂鍦ㄥ洯杞︽暟</div>
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">200</div>
+                  <div class="num">{{ data.inParkCarTotal || 0 }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
               <div class="item">
                 <div class="name_wrap">
-                  <div class="name">褰撳墠璁惧鎬绘暟</div>
+                  <div class="name">璁惧鍦ㄧ嚎瀹屽ソ鏁�</div>
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">200</div>
+                  <div class="num">{{ data2 }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
               <div class="item">
                 <div class="name_wrap">
-                  <div class="name">褰撳墠鍛婅鎬绘暟</div>
+                  <div class="name">褰撳墠鎶ヨ鎬绘暟</div>
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">200</div>
+                  <div class="num">{{ warningNum }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="monitoring" @click="changeMon">
+            <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt="">
+            <div>鐩戞帶鍒楄〃</div>
+            <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt="">
+            <img v-else src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
+          </div>
+
+          <div class="center_box_two">
+            <div class="center_box_two_left">
+              <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/task/title@2x.png" class="bg" alt="" />
+              </div>
+              <div class="device">
+                <div class="device_chat">
+                  <div class="device_chat_qiam" v-if="dataListT2.length > 0">
+                    <span>{{dataListT2[0].value + dataListT2[1].value}}</span>
+                    <span>鎬昏</span>
+                  </div>
+                  <div id="device_chat_val"></div>
+                  <div class="device_chat_info" v-if="dataListT2.length > 0">
+                    <div class="device_chat_info_row">
+                      <div style="background-color: #01D9FE;" class="device_chat_info_row_dian"></div>
+                      <div class="device_chat_info_row_nr">
+                        <span>鍦ㄧ嚎</span>
+                        <span style="color: #01D9FE;">{{dataListT2[0].value}}</span>
+                      </div>
+                    </div>
+                    <div class="device_chat_info_row">
+                      <div style="background-color: #FEAF01;" class="device_chat_info_row_dian"></div>
+                      <div class="device_chat_info_row_nr">
+                        <span>绂荤嚎</span>
+                        <span style="color: #FEAF01;">{{dataListT2[1].value}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="device_table">
+                  <div class="table">
+                    <div class="line header">
+                      <div class="line-row">璁惧绫诲瀷</div>
+                      <div class="line-row">鎬绘暟</div>
+                      <div class="line-row">鍦ㄧ嚎瀹屽ソ鏁�</div>
+                      <div class="line-row">绂荤嚎鏁�</div>
+                    </div>
+                    <div style="width: 100%; height: 96px; overflow: hidden;">
+                      <div v-if="dataList2.length > 0" class="four-swiper">
+                        <div class="swiper-wrapper">
+                          <div class="four-swiper-slide swiper-slide" v-for="(item, index) in dataList2" :key="index">
+                            <div class="line">
+                              <div class="line-row">{{ item.deviceType }}</div>
+                              <div class="line-row">{{ item.totalNum }}</div>
+                              <div class="line-row">{{ item.onlineNum }}</div>
+                              <div class="line-row">{{ item.offlineDeviceNum }}</div>
+                            </div>
+                            <div class="separate"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="dataList2.length == 0" class="empty_wrap">
+                        <img style="width: 90px; height: 90px;" src="@/assets/images/default_empty.png" alt="">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="width: 20px; height: 100%"></div>
+            <div class="center_box_two_right">
+              <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/task/title@2x.png" class="bg" alt="" />
+              </div>
+              <div class="device">
+                <div class="device_item">
+                  <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="" />
+                  <div class="device_item_info">
+                    <span>鎻愭姤闅愭偅鏁�</span>
+                    <span><b style="color: #01C4FE;">{{ dataList5.dangerTotalNum || 0 }}</b>涓�</span>
+                  </div>
+                </div>
+                <div class="device_item">
+                  <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="" />
+                  <div class="device_item_info">
+                    <span>鏈暣鏀归棴鐜暟</span>
+                    <span><b style="color: #FFB120;">{{ dataList5.dangerDealedNum || 0 }}</b>涓�</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -167,265 +340,79 @@
             <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="" />
+              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
             </div>
-            <div class="second_title">
-              <div class="title">
-                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
-                <div>褰撳墠鍦ㄥ洯浜哄憳鍒嗗竷</div>
-              </div>
-            </div>
-            <div class="static_wrap">
-              <div class="item">
-                <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
-                <div class="content">
-                  <div class="name">鍐呴儴鍛樺伐</div>
-                  <div class="num"><span>1000</span> | 66.6%</div>
-                </div>
-              </div>
-              <div class="item">
-                <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
-                <div class="content">
-                  <div class="name">闀挎湡鐩稿叧鏂�</div>
-                  <div class="num today"><span>1000</span> | 66.6%</div>
-                </div>
-              </div>
-              <div class="item">
-                <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
-                <div class="content">
-                  <div class="name">鍦ㄥ洯璁垮</div>
-                  <div class="num finish"><span>1000</span> | 66.6%</div>
+            <div class="one_swiper_wrap">
+              <div class="list one-swiper" style="margin: 0 !important;">
+                <div class="swiper-wrapper">
+                  <div class="one-swiper-slide swiper-slide item" v-for="item in arr1">
+                    <div class="item_wrap">
+                      <img :src="item.img" class="avatar" alt="">
+                      <div class="content">
+                        <div class="header">
+                          <div class="name">{{ item.title }}</div>
+                          <div class="have_time">宸茬粡鍙戠敓{{ item.haveTime }}</div>
+                        </div>
+                        <div class="wrap">
+                          <div class="line addr">
+                            <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
+                            <span>{{ item.addr }}</span>
+                          </div>
+                          <div class="line time">
+                            <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
+                            <span>{{ item.createDate }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="arr1.length == 0" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <img src="@/assets/images/default_empty.png" style="width: 120px; height: 120px;" alt="">
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="second_title">
-              <div class="title">
-                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
-                <div>浠婃棩璁垮鍒嗘瀽</div>
-              </div>
-            </div>
-            <div class="visitor_list">
-              <div class="item">
-                <div class="name">寰呰闂�</div>
-                <div class="num_wrap">
-                  <span class="num">22</span>
-                  <span>浜�</span>
-                </div>
-              </div>
-              <div class="spacing"></div>
-              <div class="item">
-                <div class="name">宸茬櫥鏈�</div>
-                <div class="num_wrap">
-                  <span class="num">22</span>
-                  <span>浜�</span>
-                </div>
-              </div>
-              <div class="spacing"></div>
-              <div class="item">
-                <div class="name">宸茬寮�</div>
-                <div class="num_wrap">
-                  <span class="num">22</span>
-                  <span>浜�</span>
-                </div>
-              </div>
-              <div class="spacing"></div>
-              <div class="item">
-                <div class="name">婊炵暀</div>
-                <div class="num_wrap">
-                  <span class="num">22</span>
-                  <span>浜�</span>
-                </div>
-              </div>
-            </div>
-            <div class="echart3" id="echart3"></div>
           </div>
           <div class="right_box_two">
-
-          </div>
-          <div class="right_box_three">
-
-          </div>
-        </div>
-      </div>
-      <div class="main_footer">
-        <div class="car_warning">
-          <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="table">
-            <div class="line header">
-              <div>杞︾墝</div>
-              <div class="dept">鎷滆閮ㄩ棬</div>
-              <div class="time">瓒呮椂鏃堕暱</div>
-            </div>
-            <div class="line">
-              <div>鐨朅33234</div>
-              <div class="dept">缁煎悎绠＄悊绉�</div>
-              <div class="time">10:21</div>
-            </div>
-            <div class="separate"></div>
-            <div class="line">
-              <div>鐨朅33234</div>
-              <div class="dept">缁煎悎绠＄悊绉�</div>
-              <div class="time">10:21</div>
-            </div>
-            <div class="separate"></div>
-          </div>
-        </div>
-        <div class="safe_warning">
-          <div class="com_header">
-            <div class="title">
-              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
-              <div>瀹夐槻鍛婅</div>
-            </div>
-            <div class="tabs">
-              <div class="tab active">鍏ㄩ儴</div>
-              <div class="separate"></div>
-              <div class="tab">鍖哄煙鍛婅</div>
-              <div class="separate"></div>
-              <div class="tab">琛屼负鍛婅</div>
-            </div>
-            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
-          </div>
-          <div class="list">
-            <div class="item">
-              <div class="icon">
-                <div class="circle"></div>
-                <div class="line"></div>
+            <div class="com_header">
+              <div class="title">
+                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+                <div>鍗遍櫓琛屼负鍔ㄦ�佺鎺�</div>
               </div>
-              <div class="content">
-                <div class="header">
-                  <div class="time">
-                    <span>123</span>
-                    <span class="status">澶勭悊涓�</span>
+              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
+            </div>
+            <div class="one_swiper_wrap">
+              <div class="list one-swiper" style="margin: 0 !important;">
+                <div class="swiper-wrapper">
+                  <div class="one-swiper-slide swiper-slide item" v-for="item in arr2">
+                    <div class="item_wrap">
+                      <img :src="item.img" class="avatar" alt="">
+                      <div class="content">
+                        <div class="header">
+                          <div class="name">{{ item.title }}</div>
+                          <div class="have_time">宸茬粡鍙戠敓{{ item.haveTime }}</div>
+                        </div>
+                        <div class="wrap">
+                          <div class="line addr">
+                            <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
+                            <span>{{ item.addr }}</span>
+                          </div>
+                          <div class="line time">
+                            <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
+                            <span>{{ item.createDate }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                  <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div>
-                </div>
-                <div class="wrap">
-                  <div class="title">娑堥槻璀﹀憡</div>
-                  <div class="title">address</div>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <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 v-if="arr2.length == 0" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <img src="@/assets/images/default_empty.png" style="width: 120px; height: 120px;" alt="">
                   </div>
-                  <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div>
-                </div>
-                <div class="wrap">
-                  <div class="title">娑堥槻璀﹀憡</div>
-                  <div class="title">address</div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="garden_warning">
-          <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="monitoring">
-            <img src="@/assets/images/SecurityControl/jiankong.png" class="icon" alt="">
-            <div>鐩戞帶鍒楄〃</div>
-            <img src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
-          </div>
-          <div class="content">
-            <div class="sa_static">
-              <div class="echart_wrap">
-                <div class="pie_text">
-                  <div class="fs30"><strong>300</strong></div>
-                  <div>鎬昏</div>
-                </div>
-                <div class="echart" id="echart2"></div>
-              </div>
-              <div class="list">
-                <div class="item">
-                  <div class="line">
-                    <div :style="{ background: colors[1] }" class="icon"></div>
-                    <div class="text">鍦ㄧ嚎</div>
-                  </div>
-                  <div :style="{ color: colors[1] }" class="num">100</div>
-                </div>
-                <div class="item">
-                  <div class="line">
-                    <div :style="{ background: colors[2] }" class="icon"></div>
-                    <div class="text">绂荤嚎</div>
-                  </div>
-                  <div :style="{ color: colors[2] }" class="num">100</div>
-                </div>
-              </div>
-            </div>
-            <div class="table">
-              <div class="line header">
-                <div class="driver">璁惧绫诲瀷</div>
-                <div>鎬绘暟</div>
-                <div>鍦ㄧ嚎鏁�</div>
-                <div>绂荤嚎鏁�</div>
-                <div>鍦ㄧ嚎鐜�</div>
-              </div>
-              <div class="line">
-                <div class="driver">闂ㄧ璁惧</div>
-                <div>10</div>
-                <div>10</div>
-                <div>10</div>
-                <div>10</div>
-              </div>
-              <div class="separate"></div>
-              <div class="line">
-                <div class="driver">闂ㄧ璁惧</div>
-                <div>10</div>
-                <div>10</div>
-                <div>10</div>
-                <div>10</div>
-              </div>
-              <div class="separate"></div>
-            </div>
-          </div>
-        </div>
-        <div class="visitor_warning">
-          <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="table">
-            <div class="line header">
-              <div>濮撳悕</div>
-              <div class="dept">鎷滆閮ㄩ棬</div>
-              <div class="dept">瓒呮椂鏃堕暱</div>
-            </div>
-            <div class="line">
-              <div>name</div>
-              <div class="dept">缁煎悎绠＄悊绉�</div>
-              <div class="dept">10:21</div>
-            </div>
-            <div class="separate"></div>
-            <div class="line">
-              <div>name</div>
-              <div class="dept">缁煎悎绠＄悊绉�</div>
-              <div class="dept">10:21</div>
-            </div>
-            <div class="separate"></div>
           </div>
         </div>
       </div>
@@ -434,13 +421,31 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import VScaleScreen from 'v-scale-screen'
 import Percent from '@/components/percent.vue'
 import dayjs from 'dayjs'
-
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration)
 import * as echarts from 'echarts'
-const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
+import 'swiper/css/swiper.min.css'
+import Swiper from 'swiper'
+import Video from './videoUrl/Video.vue'
+import Loading from '@/components/Loading.vue'
+import {
+  getEnergyCenterData,
+  afgetCarmeraPreviemUrl,
+  afwarningEventData,
+  getSecurityDeviceData,
+  getVisitRetentionData,
+  afgetVisitData,
+  afregionTreea,
+  visitSecurityData,
+  getFightingcenterData,
+  inParkUser
+} from '@/api'
+
+
 const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
 const date = ref(dayjs().format('YYYY.MM.DD'))
 const week = ref(weekMap[new Date().getDay()])
@@ -451,6 +456,72 @@
   time.value = dayjs().format('HH:mm:ss')
 
 }, 1000)
+
+const initChat = () => {
+  inParkUser({})
+    .then(res => {
+      let myChart = echarts.init(document.querySelector('.ren_chat_val'))
+      myChart.setOption({
+        grid: {
+          top: '5%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#D2E0FF',
+            interval: 0
+          },
+          data: ['鍐呴儴鍛樺伐', '闀挎湡鐩稿叧鏂�', '鍦ㄥ洯璁垮', '璐ц繍鍙告満']
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#D2E0FF'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+              color: 'rgba(255,255,255,0.14)',
+            }
+          }
+        },
+        series: [
+          {
+            data: [
+              res.data.todayInParkUserNum - (res.data.inParkLwUserNum + res.data.inParkVisitUserNum + res.data.inParkDriverUserNum),
+              res.data.inParkLwUserNum,
+              res.data.inParkVisitUserNum,
+              res.data.inParkDriverUserNum
+            ],
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  1, 1, 0, 0,
+                  [
+                    { offset: 0, color: 'rgba(0, 242, 243, 0.10)' },
+                    { offset: 1, color: 'rgba(0, 242, 243, 1)' }
+                  ]
+                )
+              }
+            }
+          }
+        ]
+      })
+      window.addEventListener('resize', function () {//鎵ц
+        myChart.resize()
+      })
+    })
+}
 
 const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
 const initEnergy = () => {
@@ -513,8 +584,18 @@
     myChart.resize()
   })
 }
+
+const dataList1 = ref([])
 const initEchart1 = () => {
   const myChart = echarts.init(document.getElementById('echart1'))
+  const temp = []
+  temp.push({ name: '鍐呰繍杞﹁締', value: data.value.internalJobCarTotal })
+  temp.push({ name: '澶栧崗杩愯緭杞﹁締', value: data.value.relatedJobCarTotal })
+  temp.push({ name: '甯傚叕鍙稿嵏璐ц溅杈�', value: data.value.visitJobCarTotal })
+  temp.sort((a, b) => {
+    return a.value - b.value
+  })
+  dataList1.value = temp
   const option = {
     series: [
       {
@@ -532,11 +613,7 @@
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' }
-        ]
+        data: temp
       }
     ]
   }
@@ -545,8 +622,10 @@
     myChart.resize()
   })
 }
+
+const colors = ['#01ABFE', '#FEAF01', '#51F9E4']
 const initEchart2 = () => {
-  const myChart = echarts.init(document.getElementById('echart2'))
+  const myChart = echarts.init(document.getElementById('device_chat_val'))
   const option = {
     series: [
       {
@@ -556,7 +635,7 @@
           show: false,
           position: 'center'
         },
-        padAngle: 5,
+        padAngle: 3,
         itemStyle: {
           borderRadius: 10
         },
@@ -564,11 +643,7 @@
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' }
-        ]
+        data: dataListT2.value
       }
     ]
   }
@@ -597,18 +672,34 @@
     }]),
     new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
       offset: 0,
+      color: '#4370f2'
+    }, {
+      offset: 1,
+      color: '#61d3f9'
+    }]),
+    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+      offset: 0,
       color: '#4679f6'
     }, {
       offset: 1,
       color: '#4674f6'
     }]),
-    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-      offset: 0,
-      color: '#4370f2'
-    }, {
-      offset: 1,
-      color: '#61d3f9'
-    }])]
+  ]
+  const data = []
+  if (data4.value.total) {
+    data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(3) })
+    data.push({ name: '宸茶闂�', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(3) })
+    data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(3) })
+    data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(3) })
+  } else {
+    data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: 0 })
+    data.push({ name: '宸茶闂�', value: data4.value.registerVisitNum, rate: 0 })
+    data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: 0 })
+    data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: 0 })
+  }
+  data.sort((a, b) => (b.value - a.value))
+  // console.log('data', data);
+
   const option = {
     color: colors,
     tooltip: {
@@ -632,7 +723,7 @@
         color: "#000"
       },
       itemHeight: 2,
-      data: ['寰呰闂�', '宸茬櫥璁�', '宸茬寮�', '婊炵暀']
+      data: data.map(i => i.name)
     },
     series: [
       {
@@ -646,6 +737,9 @@
         gap: 4,
         label: {
           show: false,
+          formatter: '',
+          lineHeight: 0,
+          position: 'inside'
         },
         tooltip: {
           trigger: 'none', // 褰撻紶鏍囨偓娴湪鏌愪釜鏁版嵁椤逛笂鏃惰Е鍙�
@@ -654,13 +748,7 @@
           borderWidth: 0,
           borderColor: '#fff'
         },
-        data: [
-          { value: 100, name: '寰呰闂�', },
-          { value: 50, name: '宸茬櫥璁�' },
-          { value: 20, name: '宸茬寮�' },
-          { value: 30, name: '婊炵暀' },
-
-        ]
+        data
       },
       {
         type: 'funnel',
@@ -675,12 +763,16 @@
         label: {
           show: true,
           position: 'outside',
-          formatter: '{a|{b}}  {a|{c}%}',
+          formatter: (params) => {
+            const index = params.dataIndex
+            return `{color${index}|${params.data.name} ${(params.data.rate * 100).toFixed(1)}%}`
+            // return `<div>${params.data.name}</div>`
+          },
           rich: {
-            a: {
-              color: '#869CC9',
-              fontSize: 13
-            },
+            color0: { color: 'orange', fontSize: 14 },
+            color1: { color: '#869CC9', fontSize: 13 },
+            color2: { color: '#869CC9', fontSize: 13 },
+            color3: { color: '#869CC9', fontSize: 13 }
           }
         },
         labelLine: {
@@ -706,13 +798,7 @@
             opacity: 1
           }
         },
-        data: [
-          { value: 100, name: '寰呰闂�', },
-          { value: 50, name: '宸茬櫥璁�' },
-          { value: 20, name: '宸茬寮�' },
-          { value: 30, name: '婊炵暀' },
-
-        ]
+        data
       },
     ]
   }
@@ -722,10 +808,356 @@
   })
 }
 
+const data = ref({})
+let totalCar = ref(0)
+let CarList = ref([])
+
+const getData1 = () => {
+  CarList.value = []
+  getEnergyCenterData().then(res => {
+    if (res.code == 200) {
+      const result = res.data
+      data.value = result
+      res.data.inParkCarList.forEach(item => {
+        totalCar.value += item.total
+        if (item.name === '鍏姟杞�') {
+          CarList.value.push({ name: '鍏姟杞﹁締', value: item.total, color: '#FEAF01' })
+        } else if (item.name === '绉佸杞�') {
+          CarList.value.push({ name: '绉佸杞﹁締', value: item.total, color: '#28F0C4' })
+        } else if (item.name === '璁垮杞﹁締') {
+          CarList.value.push({ name: '璁垮杞﹁締', value: item.total, color: '#EEF028' })
+        } else if (item.name === '璐ц繍杞﹁締') {
+          CarList.value.push({ name: '璐ц繍杞﹁締', value: item.total, color: '#01ABFE' })
+        } else if (item.name === '鏈煡杞﹁締') {
+          CarList.value.push({ name: '鏈煡杞﹁締', value: item.total, color: '#0028ff' })
+        }
+      })
+      nextTick(() => {
+        initSafe()
+      })
+    }
+  })
+}
+
+const dataList2 = ref([])
+const data2 = ref(0)
+const dataListT2 = ref([])
+const getData2 = () => {
+  getSecurityDeviceData().then(res => {
+    if (res.code == 200 && res.data && res.data.length > 0) {
+      const result = res.data
+      let temp = []
+      let online = 0
+      let outline = 0
+      let total = 0
+      dataList2.value = result.map(item => {
+        // total += item.totalNum
+        online += item.onlineNum
+        outline += item.offlineDeviceNum
+        if (item.deviceType && item.deviceType.length > 4) {
+          item.deviceType = item.deviceType.slice(0, 4) + '...'
+        }
+        return item
+      })
+      data2.value = online
+      if (online >= outline) {
+        temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
+        temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
+      } else {
+        temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
+        temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
+      }
+
+      dataListT2.value = temp
+      // console.log(dataListT2.value)
+      console.log(dataList2.value)
+    }
+    nextTick(() => {
+      initEchart2()
+    })
+  })
+}
+
+const dataList3 = ref([])
+const data4 = ref({})
+const getData3 = () => {
+  visitSecurityData().then(res => {
+    if (!res.code == 200) return
+    data4.value = res.data || {}
+    let obj = data4.value
+    data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum
+
+    const result = res.data?.visitRetentionDataList || []
+    dataList3.value = result.map(i => {
+      if (i.timeOutMinute) {
+        i.timeOutMinute = Math.abs(i.timeOutMinute)
+      }
+      if (i.timeOutMinute > 60 * 24) {
+        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D澶〩鏃秏鍒�')
+      } else if (i.timeOutMinute > 60) {
+        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H鏃秏鍒�')
+      } else {
+        i.timeOutMinuteT = i.timeOutMinute + '鍒�'
+      }
+
+      return i
+    })
+    dataList3.value = [...dataList3.value, ...dataList3.value, ...dataList3.value, ...dataList3.value]
+    // initEchart3()
+  })
+}
+
+const loading1 = ref(false)
+const warningTab = ref('0')
+const warningNum = ref(0)
+const warningList = ref([])
+
+const arr1 = ref([])  // 閲嶇偣鍖哄煙鍔ㄦ�佺鎺�
+const arr2 = ref([])  // 鍗遍櫓琛屼负鍔ㄦ�佺鎺�
+
+const getWarning = () => {
+  afwarningEventData({ type: 1 })
+   .then(res => {
+     if (!res.data) return
+     const result = res.data.list || []
+     arr1.value = result.map(item => {
+       item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH灏忔椂mm鍒嗛挓')
+       return item
+     })
+   })
+  afwarningEventData({ type: 2 })
+    .then(res => {
+      if (!res.data) return
+      const result = res.data.list || []
+      arr2.value = result.map(item => {
+        item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH灏忔椂mm鍒嗛挓')
+        return item
+      })
+    })
+  // loading1.value = true
+  afwarningEventData({ type: 0 }).then(res => {
+    // loading1.value = false
+    if (!res.data) return
+    const result = res.data.list || []
+    warningNum.value = res.data.total
+    // warningList.value = result.map(item => {
+    //   item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH灏忔椂mm鍒嗛挓')
+    //   return item
+    // })
+    // let temp = []
+    // warningList.value.forEach((item, i) => {
+    //   // console.log(i);
+    //   if (i == 0 || i % 2 == 0) {
+    //     temp.push(item)
+    //   } else {
+    //     temp[temp.length - 1].addr0 = item.addr
+    //     temp[temp.length - 1].createDate0 = item.createDate
+    //     temp[temp.length - 1].haveTime0 = item.haveTime
+    //     temp[temp.length - 1].img0 = item.img
+    //     temp[temp.length - 1].title0 = item.title
+    //   }
+    // })
+    // warningList.value = temp
+    // console.log('temp', warningList.value);
+  }, () => {
+    // loading1.value = false
+  })
+}
+const tasClick = (val) => {
+  warningTab.value = val
+  getWarning()
+}
+
+
+const showJk = ref(false)
+const activeJkIndex = ref(0)
+const activeMenu = ref({})
+const activeVideo = ref('')
+const dataValue5 = ref('')
+const data5 = ref([])
+const getData5 = () => {
+  afregionTreea({
+    name: dataValue5.value,
+    withCameras: 1
+  }).then(res => {
+    const result = res.data || []
+    data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0)
+  })
+}
+const changeMon = () => {
+  showJk.value = !showJk.value
+  if (!showJk.value) {
+    activeJkIndex.value = -1
+    activeMenu.value = {}
+  }
+}
+const menuClick = (val) => {
+  if (val == activeJkIndex.value) {
+    activeJkIndex.value = -1
+  } else {
+    activeJkIndex.value = val
+  }
+}
+const menuItemClick = (val) => {
+  activeMenu.value = val
+
+}
+const autoplayFlag = (list = [], leng = 4, time = 2000) => {
+  if (list.length > leng) {
+    return { delay: time, disableOnInteraction: false }
+  } else {
+    return false
+  }
+}
+const loopFn1 = () => {
+  var newSwiper1 = new Swiper('.one-swiper', {
+    initialSlide: 0,
+    // loop: true, // 寰幆妯″紡閫夐」
+    direction: 'vertical', //绔栫洿鏂瑰悜
+    slidesPerView: 3,
+    autoplay: arr1.value.length > 3 ? { delay: 4000, disableOnInteraction: false } : false,
+    observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+  })
+}
+// const loopFn2 = () => {
+//   var newSwiper2 = new Swiper('.two-swiper', {
+//     initialSlide: 0,
+//     direction: 'vertical', //绔栫洿鏂瑰悜
+//     slidesPerView: 3,
+//     autoplay: autoplayFlag(arr2.value.filter(i => i.totalNum > 0), 3, 4000),
+//     observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+//   })
+// }
+const loopFn3 = () => {
+  var newSwiper3 = new Swiper('.three-swiper', {
+    initialSlide: 0,
+    // loop: true, // 寰幆妯″紡閫夐」
+    direction: 'vertical', //绔栫洿鏂瑰悜
+    slidesPerView: 3,
+    height: 100,
+    autoplay: autoplayFlag(dataList3.value, 3, 4000),
+    observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+  })
+}
+
+const loopFn4 = () => {
+  var newSwiper4 = new Swiper('.four-swiper', {
+    initialSlide: 0,
+    height: 100,
+    direction: 'vertical',
+    slidesPerView: 3,
+    autoplay: autoplayFlag(dataList2.value, 3, 4000),
+    observer: true
+  })
+}
+
+const initSafe = () => {
+  const myChart = echarts.init(document.getElementById('safe_chat_val'))
+
+  const option = {
+    xAxis: CarList.value.map(item => item.name),
+    series: [
+      {
+        type: 'pie',
+        radius: ['86%', '100%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        padAngle: 5,
+        itemStyle: {
+          borderRadius: 10
+        },
+        color: CarList.value.map(item => item.color),
+        labelLine: {
+          show: false
+        },
+        data: CarList.value.map(item => item.value)
+      }
+    ]
+  }
+  myChart.setOption(option)
+  window.addEventListener('resize', function () { // 鎵ц
+    myChart.resize()
+  })
+}
+
+const initDevice = () => {
+  let colorList = ['#FFD802', '#53E3FF']
+  const myChart = echarts.init(document.getElementById('device_chat_val'))
+  const temp = []
+  temp.push({ name: '鍦ㄧ嚎', value: 12 })
+  temp.push({ name: '绂荤嚎', value: 32 })
+  temp.sort((a, b) => {
+    return a.value - b.value
+  })
+  const option = {
+    xAxis: temp.map(item => item.name),
+    series: [
+      {
+        type: 'pie',
+        radius: ['86%', '100%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        padAngle: 5,
+        itemStyle: {
+          borderRadius: 10
+        },
+        color: colorList,
+        labelLine: {
+          show: false
+        },
+        data: temp.map(item => item.value)
+      }
+    ]
+  }
+  myChart.setOption(option)
+  window.addEventListener('resize', function () { // 鎵ц
+    myChart.resize()
+  })
+}
+
+const dataList5 = ref({})
+const getData4 = () => {
+  getFightingcenterData().then(res => {
+    dataList5.value = res.data || {}
+  })
+}
+
 onMounted(() => {
-  initEchart3()
-  initEchart1()
-  initEchart2()
+  getData1()
+  getData2()
+  getData3()
+  getData5()
+  getWarning()
+
+  initChat()
+  // initSafe()
+  initDevice()
+  getData4()
+
+  setInterval(() => {
+    getData1()
+    getData2()
+    getData3()
+    getData4()
+    getWarning()
+    initChat()
+  }, 1000 * 60)
+
+  setInterval(() => {
+    getData5()
+  }, 1000 * 60 * 60)
+
+  setTimeout(() => {
+    loopFn1()
+    // loopFn2()
+    loopFn3()
+    loopFn4()
+  }, 12000)
+
 })
 
 
@@ -736,13 +1168,241 @@
   box-sizing: border-box;
 }
 
+.swiper-wrapper {
+  display: block !important;
+}
+
+.swiper-slide {
+  height: auto !important; /* 浣跨敤 !important 鏉ョ‘淇濅紭鍏堢骇 */
+}
+
 .main_content {
   display: flex;
   padding: 20px 25px 0;
-  border: 1px solid;
 
   .left_box {
     width: 360px;
+
+    .safe_warning {
+      width: 360px;
+      position: relative;
+
+      .safe_warning_content {
+        width: 100%;
+        padding: 15px 0;
+        box-sizing: border-box;
+        height: 326px;
+        background: rgba(0,86,255,0.1);
+        backdrop-filter: blur(5px);
+        .safe_chat {
+          width: 100%;
+          height: 169px;
+          margin-top: 15px;
+          display: flex;
+          padding: 15px 24px;
+          box-sizing: border-box;
+          align-items: start;
+          position: relative;
+          .safe_chat_val_n {
+            position: absolute;
+            top: 75px;
+            left: 84px;
+            transform: translate(-50%, -50%);
+            width: 90px;
+            height: 90px;
+            border-radius: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 1px dashed rgba(1,217,254,0.7);
+            span {
+              &:nth-child(1) {
+                font-weight: bold;
+                font-size: 18px;
+                color: #FFFFFF;
+              }
+              &:nth-child(2) {
+                font-weight: 400;
+                font-size: 12px;
+                color: rgba(255,255,255,0.8);
+              }
+            }
+          }
+          #safe_chat_val {
+            flex-shrink: 0;
+            width: 120px;
+            height: 120px;
+            margin-right: 40px;
+          }
+          .safe_chat_info {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .safe_chat_info_row {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-top: 10px;
+              &:first-child {
+                margin: 0 !important;
+              }
+              .safe_left {
+                display: flex;
+                align-items: center;
+                .safe_left_dian {
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  background: #01ABFE;
+                  margin-right: 10px;
+                }
+                .safe_left_name {
+                  font-weight: 400;
+                  font-size: 14px;
+                  color: #FFFFFF;
+                }
+              }
+              .safe_num {
+                font-weight: bold;
+                font-size: 16px;
+                color: #01ABFE;
+              }
+            }
+          }
+        }
+        .safe_zhu {
+          width: 100%;
+          height: 91px;
+          padding: 0 20px;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          .safe_zhu_item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            &:last-child {
+              margin: 0 !important;
+            }
+            .safe_zhu_item_label {
+              width: 100px;
+              flex-shrink: 0;
+            }
+            .safe_zhu_item_c {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              .safe_zhu_item_c_t {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                span {
+                  font-weight: 400;
+                  font-size: 13px;
+                  color: #D2E0FF;
+                }
+              }
+              .safe_zhu_item_c_b {
+                width: 100%;
+                height: 10px;
+                margin-top: 5px;
+                background: rgba(255,255,255,0.07);
+                .safe_zhu_item_c_b_z {
+                  height: 100%;
+                  background: linear-gradient( 270deg, #00F2F3 0%, rgba(0,242,243,0.1) 100%);
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .list {
+        height: 204px;
+        overflow: hidden;
+        margin-top: 15px;
+        scrollbar-width: none;
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: 20px;
+
+        .item {
+          width: 736px;
+          height: 102px !important;
+          font-size: 13px;
+          color: #D2E0FF;
+          display: flex;
+
+          /* border: 1px solid; */
+          .item_wrap {
+            width: 368px;
+            height: 90px;
+            padding: 10px;
+            background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
+            border: 1px solid #006E81;
+            display: flex;
+            margin-right: 10px;
+
+            &:nth-of-type(2n) {
+              margin-right: 0;
+            }
+          }
+
+
+          .avatar {
+            width: 70px;
+            height: 70px;
+            margin-right: 10px;
+          }
+
+          .content {
+            flex: 1;
+
+            .header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 8px;
+
+              .name {
+                font-weight: 500;
+                font-size: 15px;
+              }
+
+              .have_time {
+                font-size: 12px;
+                color: #D2E0FF;
+
+                span {
+                  color: #FEAF01;
+                }
+              }
+            }
+
+            .wrap {
+              font-size: 12px;
+              color: #D2E0FF;
+
+              .line {
+                display: flex;
+                align-items: center;
+                margin-bottom: 3px;
+              }
+
+              .icon {
+                width: 12px;
+                margin-right: 8px;
+              }
+            }
+          }
+        }
+      }
+    }
 
     .left_box_one {
       width: 100%;
@@ -750,6 +1410,70 @@
       margin-bottom: 20px;
       font-size: 14px;
       color: #D2E0FF;
+      background: rgba(0, 86, 255, 0.05);
+      backdrop-filter: blur(5px);
+
+      .table {
+        height: 158px;
+        overflow: hidden;
+        width: 100%;
+        padding: 15px;
+        box-sizing: border-box;
+
+        .line {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          height: 32px;
+
+          div {
+            flex: 3;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .dept {
+            flex: 8;
+          }
+
+          .time {
+            flex: 5;
+          }
+        }
+
+        .header {
+          background: rgba(134,156,201,0.2);
+          font-weight: 500;
+
+          div {
+            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;
+        }
+      }
+
+      .ren_chat {
+        width: 100%;
+        height: 130px;
+        .ren_chat_val {
+          width: 100%;
+          height: 100%;
+        }
+      }
 
       .second_title {
         margin-top: 24px;
@@ -758,7 +1482,7 @@
 
       .stall_static {
         display: flex;
-        margin-bottom: 60px;
+        margin-bottom: 30px;
         padding: 0 20px;
 
         .residue {
@@ -807,6 +1531,13 @@
         .item {
           display: flex;
           flex-direction: column;
+          align-items: center;
+
+          .icon {
+            width: 52px;
+            height: 52px;
+            margin-bottom: 8px;
+          }
 
           /* align-items: center; */
           .num {
@@ -935,6 +1666,120 @@
   .center_box {
     flex: 1;
     margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+
+    .jiankong {
+      margin: 0 48px;
+      display: flex;
+      height: calc(100% - 40px);
+      position: relative;
+
+      .jk_bg {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: -1;
+      }
+
+      .content {
+        flex: 1;
+        /* height: calc( 100% - 30px ); */
+        padding: 16px 0px 32px 20px;
+
+        .video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .right_wrap {
+        margin-left: 15px;
+        width: 250px;
+        padding: 16px 20px 32px 0;
+
+        .menus {
+          height: 100%;
+          background: #002A42;
+          border: 1px solid rgba(1, 171, 254, 0.8);
+          padding: 15px;
+
+          .search_wrap {
+            display: flex;
+            align-items: center;
+            box-shadow: inset 0px 0px 6px 0px rgba(1, 171, 254, 0.5);
+            border-radius: 2px;
+            border: 1px solid rgba(1, 171, 254, 0.8);
+            height: 34px;
+            line-height: 34px;
+            padding-left: 12px;
+
+            .search {
+              width: 12px;
+              height: 12px;
+              margin-right: 3px;
+            }
+
+            .input {
+              flex: 1;
+              font-size: 14px;
+            }
+          }
+
+          .menu_wrap {
+            margin-top: 15px;
+            max-height: 440px;
+            overflow: auto;
+
+            .menu {
+              .menu_name {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 34px;
+                border-bottom: 2px solid rgba(210, 224, 255, 0.2);
+                cursor: pointer;
+
+                .name {}
+
+                .icon {
+                  width: 8px;
+                }
+
+                .open {
+                  width: 14px;
+                }
+              }
+
+              .list {
+                .item {
+                  display: flex;
+                  /* align-items: center; */
+                  margin-left: 10px;
+                  cursor: pointer;
+                  color: #D2E0FF;
+                  margin-top: 8px;
+
+                  .icon {
+                    width: 15px;
+                    height: 14px;
+                    margin-right: 8px;
+                    margin-top: 2px;
+                  }
+
+                  .active {
+                    color: #01D9FE;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+    }
 
     .center_box_one {
       padding: 8px 60px;
@@ -974,6 +1819,228 @@
         }
       }
     }
+
+    .monitoring {
+      position: absolute;
+      cursor: pointer;
+      bottom: 220px;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      font-size: 15px;
+      width: 134px;
+      height: 40px;
+      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
+      border-radius: 2px;
+      border: 1px solid rgba(12, 153, 236, 0.68);
+
+      .icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      .top {
+        width: 12px;
+        height: 12px;
+        margin-left: 8px;
+      }
+    }
+
+    .center_box_two {
+      width: 100%;
+      height: 202px;
+      display: flex;
+      align-items: center;
+      .center_box_two_left {
+        flex-shrink: 0;
+        width: 621px;
+        height: 100%;
+        .device {
+          width: 100%;
+          height: 162px;
+          padding: 15px;
+          background: rgba(0,86,255,0.1);
+          backdrop-filter: blur(5px);
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .device_chat {
+            flex-shrink: 0;
+            width: 251px;
+            height: 100%;
+            display: flex;
+            align-items: start;
+            position: relative;
+            .device_chat_qiam {
+              position: absolute;
+              top: 16px;
+              left: 16px;
+              width: 88px;
+              height: 88px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex-direction: column;
+              border-radius: 50%;
+              box-shadow: inset 0 0 8px 0 #01D9FE;
+              span {
+                &:nth-child(1) {
+                  font-weight: 500;
+                  font-size: 20px;
+                  color: #FFFFFF;
+                }
+                &:nth-child(2) {
+                  font-weight: 400;
+                  font-size: 14px;
+                  color: rgba(255,255,255,0.8);
+                }
+              }
+            }
+            #device_chat_val {
+              flex-shrink: 0;
+              width: 120px;
+              height: 120px;
+              margin-right: 30px;
+            }
+            .device_chat_info {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              .device_chat_info_row {
+                display: flex;
+                align-items: start;
+                margin-bottom: 20px;
+                &:last-child {
+                  margin: 0 !important;
+                }
+                .device_chat_info_row_dian {
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  background: #01D9FE;
+                  margin-top: 5px;
+                  margin-right: 10px;
+                }
+                .device_chat_info_row_nr {
+                  display: flex;
+                  flex-direction: column;
+                  span {
+                    &:nth-child(1) {
+                      font-weight: 400;
+                      font-size: 14px;
+                      color: #FFFFFF;
+                    }
+                    &:nth-child(2) {
+                      font-weight: 500;
+                      font-size: 14px;
+                      color: #01D9FE;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          .device_table {
+            flex: 1;
+            height: 100%;
+            .table {
+              height: 128px;
+              overflow: hidden;
+              width: 100%;
+
+              .line {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                height: 32px;
+
+                .line-row {
+                  flex: 1;
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+              }
+
+              .header {
+                background: rgba(134, 156, 201, 0.1);
+                font-weight: 500;
+
+                div {
+                  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);
+                border-right: 4px solid #00F2F3;
+                border-left: 4px solid #00F2F3;
+              }
+            }
+          }
+        }
+      }
+      .center_box_two_right {
+        flex: 1;
+        height: 100%;
+        .device {
+          width: 100%;
+          height: 162px;
+          padding: 23px 20px;
+          background: rgba(0,86,255,0.1);
+          backdrop-filter: blur(5px);
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .device_item {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              flex-shrink: 0;
+              width: 90px;
+              height: 90px;
+              margin-right: 10px;
+            }
+            .device_item_info {
+              display: flex;
+              flex-direction: column;
+              span {
+                &:nth-child(1) {
+                  font-weight: 400;
+                  font-size: 15px;
+                  color: #FFFFFF;
+                }
+                &:nth-child(2) {
+                  font-weight: 400;
+                  font-size: 12px;
+                  color: #D2E0FF;
+                  b {
+                    font-weight: bold;
+                    font-size: 24px;
+                    line-height: 36px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .right_box {
@@ -981,91 +2048,265 @@
 
     .right_box_one {
       margin-bottom: 20px;
+      background: rgba(0, 86, 255, 0.05);
+      backdrop-filter: blur(5px);
 
-      .second_title {
-        margin-top: 20px;
+      .one_swiper_wrap {
+        height: 370px;
+        overflow: hidden;
+        background: rgba(0, 86, 255, 0.05);
+        backdrop-filter: blur(5px);
+        padding: 15px;
+        box-sizing: border-box;
       }
 
-      .static_wrap {
-        padding: 14px 0 0 46px;
+      .list {
+        height: 100%;
+        overflow: hidden;
+        margin-top: 15px;
+        scrollbar-width: none;
+        display: flex;
+        flex-wrap: wrap;
 
         .item {
+          width: 100%;
+          height: 102px !important;
+          font-size: 13px;
+          color: #D2E0FF;
           display: flex;
-          align-items: center;
-          display: flex;
-          margin-bottom: 10px;
 
-          img {
+          .item_wrap {
+            width: 368px;
+            height: 90px;
+            padding: 10px;
+            background: linear-gradient( 270deg, rgba(254,85,1,0) 0%, rgba(254,85,1,0.44) 100%);
+            border: 1px solid #C15D2B;
+            display: flex;
+          }
+
+
+          .avatar {
             width: 70px;
             height: 70px;
-            margin-right: 20px;
+            margin-right: 10px;
           }
 
           .content {
-            color: #FFFFFF;
+            flex: 1;
 
-            .num {
-              margin-top: 8px;
-              font-size: 16px;
-              color: #00F2F3;
+            .header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 8px;
 
-              span {
-                font-size: 20px;
-                margin-right: 4px;
-                font-weight: 600;
+              .name {
+                font-weight: 500;
+                font-size: 15px;
+              }
+
+              .have_time {
+                font-size: 12px;
+                color: #D2E0FF;
+
+                span {
+                  color: #FEAF01;
+                }
               }
             }
 
-            .today {
-              color: #09FACD;
-            }
+            .wrap {
+              font-size: 12px;
+              color: #D2E0FF;
 
-            .finish {
-              color: #FEAF01;
+              .line {
+                display: flex;
+                align-items: center;
+                margin-bottom: 3px;
+              }
+
+              .icon {
+                width: 12px;
+                margin-right: 8px;
+              }
             }
           }
         }
       }
 
-      .visitor_list {
+      /*.second_title {*/
+      /*  margin-top: 20px;*/
+      /*}*/
+
+      /*.static_wrap {*/
+      /*  padding: 14px 0 0 46px;*/
+
+      /*  .item {*/
+      /*    display: flex;*/
+      /*    align-items: center;*/
+      /*    display: flex;*/
+      /*    margin-bottom: 10px;*/
+
+      /*    img {*/
+      /*      width: 70px;*/
+      /*      height: 70px;*/
+      /*      margin-right: 20px;*/
+      /*    }*/
+
+      /*    .content {*/
+      /*      color: #FFFFFF;*/
+
+      /*      .num {*/
+      /*        margin-top: 8px;*/
+      /*        font-size: 16px;*/
+      /*        color: #00F2F3;*/
+
+      /*        span {*/
+      /*          font-size: 20px;*/
+      /*          margin-right: 4px;*/
+      /*          font-weight: 600;*/
+      /*        }*/
+      /*      }*/
+
+      /*      .today {*/
+      /*        color: #09FACD;*/
+      /*      }*/
+
+      /*      .finish {*/
+      /*        color: #FEAF01;*/
+      /*      }*/
+      /*    }*/
+      /*  }*/
+      /*}*/
+
+      /*.visitor_list {*/
+      /*  display: flex;*/
+      /*  justify-content: space-between;*/
+      /*  padding: 20px 20px 16px;*/
+
+      /*  .item {*/
+      /*    font-size: 12px;*/
+      /*    color: #D2E0FF;*/
+
+      /*    .num_wrap {*/
+      /*      display: flex;*/
+      /*      align-items: flex-end;*/
+      /*      margin-top: 8px;*/
+
+      /*      .num {*/
+      /*        font-size: 22px;*/
+      /*        line-height: 22px;*/
+      /*        color: #FFFFFF;*/
+      /*      }*/
+      /*    }*/
+      /*  }*/
+
+      /*  .spacing {*/
+      /*    width: 1px;*/
+      /*    height: 40px;*/
+      /*    background-color: #405173;*/
+      /*    margin: 0 24px;*/
+      /*  }*/
+      /*}*/
+
+      /*.echart3 {*/
+      /*  width: 100%;*/
+      /*  height: 140px;*/
+      /*}*/
+    }
+
+    .right_box_two {
+      background: rgba(0, 86, 255, 0.05);
+      backdrop-filter: blur(5px);
+
+      .one_swiper_wrap {
+        height: 350px;
+        overflow: hidden;
+        background: rgba(0, 86, 255, 0.05);
+        backdrop-filter: blur(5px);
+        padding: 15px;
+        box-sizing: border-box;
+      }
+
+      .list {
+        height: 100%;
+        overflow: hidden;
+        margin-top: 15px;
+        scrollbar-width: none;
         display: flex;
-        justify-content: space-between;
-        padding: 20px 20px 16px;
+        flex-wrap: wrap;
 
         .item {
-          font-size: 12px;
+          width: 100%;
+          height: 102px !important;
+          font-size: 13px;
           color: #D2E0FF;
+          display: flex;
 
-          .num_wrap {
+          .item_wrap {
+            width: 368px;
+            height: 90px;
+            padding: 10px;
+            background: linear-gradient( 270deg, rgba(1,217,254,0) 0%, rgba(1,217,254,0.19) 100%);
+            border: 1px solid #006E81;
             display: flex;
-            align-items: flex-end;
-            margin-top: 8px;
+          }
 
-            .num {
-              font-size: 22px;
-              line-height: 22px;
-              color: #FFFFFF;
+
+          .avatar {
+            width: 70px;
+            height: 70px;
+            margin-right: 10px;
+          }
+
+          .content {
+            flex: 1;
+
+            .header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 8px;
+
+              .name {
+                font-weight: 500;
+                font-size: 15px;
+              }
+
+              .have_time {
+                font-size: 12px;
+                color: #D2E0FF;
+
+                span {
+                  color: #FEAF01;
+                }
+              }
+            }
+
+            .wrap {
+              font-size: 12px;
+              color: #D2E0FF;
+
+              .line {
+                display: flex;
+                align-items: center;
+                margin-bottom: 3px;
+              }
+
+              .icon {
+                width: 12px;
+                margin-right: 8px;
+              }
             }
           }
         }
-
-        .spacing {
-          width: 1px;
-          height: 40px;
-          background-color: #405173;
-          margin: 0 24px;
-        }
-      }
-
-      .echart3 {
-        width: 100%;
-        height: 140px;
       }
     }
 
-    .right_box_two {}
-
-    .right_box_three {}
+    .right_box_three {
+      background: rgba(0, 86, 255, 0.05);
+      backdrop-filter: blur(5px);
+    }
   }
 }
 
@@ -1132,95 +2373,66 @@
 
   .car_warning {
     width: 360px;
-
-    .table {
-      margin-top: 15px;
-
-      .line {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        height: 32px;
-
-        div {
-          flex: 3;
-          height: 16px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .dept {
-          flex: 5;
-        }
-
-        .time {
-          flex: 4;
-        }
-      }
-
-      .header {
-        background: rgba(134, 156, 201, 0.1);
-        font-weight: 500;
-
-        div {
-          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;
-      }
-    }
   }
 
   .safe_warning {
-    width: 406px;
-    margin-left: 20px;
+    width: 786px;
     margin-right: 20px;
+    position: relative;
+
+    .safe_warning_content {
+      width: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+      height: 326px;
+      background: rgba(0,86,255,0.1);
+      backdrop-filter: blur(5px);
+    }
+
+    /* one-swiper */
+    .one_swiper_wrap {
+      height: 140px;
+      overflow: hidden;
+      background: rgba(0, 86, 255, 0.05);
+      backdrop-filter: blur(5px);
+    }
 
     .list {
-      height: 124px;
-      overflow: auto;
+      height: 204px;
+      overflow: hidden;
       margin-top: 15px;
       scrollbar-width: none;
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 20px;
 
       .item {
-        display: flex;
+        width: 736px;
+        height: 102px !important;
         font-size: 13px;
         color: #D2E0FF;
+        display: flex;
 
-        .icon {
-          width: 40px;
+        /* border: 1px solid; */
+        .item_wrap {
+          width: 368px;
+          height: 90px;
+          padding: 10px;
+          background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
+          border: 1px solid #006E81;
           display: flex;
-          flex-direction: column;
-          align-items: center;
-          padding-top: 3px;
+          margin-right: 10px;
 
-          .circle {
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: #01D9FE;
-            box-shadow: 0px 0px 1px 4px #34788f;
-            /* opacity: 0.52; */
+          &:nth-of-type(2n) {
+            margin-right: 0;
           }
+        }
 
-          .line {
-            margin-top: 3px;
-            width: 1px;
-            height: calc(100% - 10px);
-            background-color: #153947;
-          }
+
+        .avatar {
+          width: 70px;
+          height: 70px;
+          margin-right: 10px;
         }
 
         .content {
@@ -1230,20 +2442,11 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            margin-bottom: 8px;
 
-            .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;
-              }
+            .name {
+              font-weight: 500;
+              font-size: 15px;
             }
 
             .have_time {
@@ -1257,26 +2460,18 @@
           }
 
           .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;
+            font-size: 12px;
+            color: #D2E0FF;
 
-            .title {
-              flex: 4;
-              font-weight: bold;
-              font-size: 15px;
-              color: #FFFFFF;
+            .line {
+              display: flex;
+              align-items: center;
+              margin-bottom: 3px;
             }
 
-            .address {
-              flex: 6;
+            .icon {
+              width: 12px;
+              margin-right: 8px;
             }
           }
         }
@@ -1288,6 +2483,9 @@
     flex: 1;
     margin-right: 20px;
     position: relative;
+    background: rgba(0, 86, 255, 0.05);
+    backdrop-filter: blur(5px);
+
     .content {
       display: flex;
 
@@ -1297,7 +2495,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 16px 24px;
+        padding-top: 16px;
+        padding-left: 24px;
 
         .echart_wrap {
           position: relative;
@@ -1333,7 +2532,7 @@
         }
 
         .list {
-          margin-left: 36px;
+          margin-left: 32px;
           flex: 1;
           display: flex;
           flex-direction: column;
@@ -1364,67 +2563,14 @@
           }
         }
       }
-
-      .table {
-        .line {
-          div {
-            justify-content: flex-end;
-            padding-right: 10px;
-          }
-
-          .driver {
-            flex: 4;
-            justify-content: center;
-          }
-        }
-
-        .header {
-          div {
-            justify-content: center;
-            padding-right: 0;
-          }
-        }
-      }
-    }
-
-    .monitoring {
-      position: absolute;
-      top: -60px;
-      right: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 500;
-      font-size: 15px;
-      width: 134px;
-      height: 40px;
-      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
-      border-radius: 2px;
-      border: 1px solid rgba(12, 153, 236, 0.68);
-      .icon{
-        width: 30px;
-      }
-      .top {
-        width: 12px;
-        height: 12px;
-        margin-left: 8px;
-      }
     }
 
   }
 
   .visitor_warning {
     width: 360px;
-
-    .table {
-      .line {
-        div {
-          .dept {
-            flex: 5;
-          }
-        }
-      }
-    }
+    background: rgba(0, 86, 255, 0.05);
+    backdrop-filter: blur(5px);
   }
 }
 
@@ -1441,13 +2587,6 @@
     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;
@@ -1465,66 +2604,22 @@
     .separate {
       width: 1px;
       height: 14px;
-      background-color: #d2e0ff;
+      /* background-color: #d2e0ff; */
       margin: 0 6px;
     }
 
+    .tab {
+      cursor: pointer;
+    }
+
     .active {
-      color: #0094eb;
+      font-weight: 600;
+      font-size: 15px;
+      color: #FFFFFF;
+      text-shadow: 0px 0px 8px #01D9FE;
     }
   }
 }
-
-.table {
-  margin-top: 15px;
-  flex: 1;
-
-  .line {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    height: 32px;
-
-    div {
-      flex: 3;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .dept {
-      flex: 5;
-    }
-
-    .time {
-      flex: 4;
-    }
-  }
-
-  .header {
-    background: rgba(134, 156, 201, 0.1);
-    font-weight: 500;
-
-    div {
-      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;
-  }
-}
-
 .second_title {
   height: 24px;
   display: flex;
@@ -1580,6 +2675,15 @@
     object-fit: cover;
     z-index: -1;
   }
+
+  .main_znz {
+    width: 68px;
+    height: 68px;
+    position: absolute;
+    right: 420px;
+    top: 250px;
+    z-index: -1;
+  }
 }
 
 .bg {
@@ -1591,4 +2695,4 @@
   object-fit: cover;
   z-index: -1;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3