From e011ab15d834f847baf1b8e4b86406b381be348a Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 25 Dec 2024 15:14:32 +0800
Subject: [PATCH] Update video.vue

---
 src/views/page/video.vue | 1481 +++++++++++++++++++-------------------
 1 file changed, 721 insertions(+), 760 deletions(-)

diff --git a/src/views/page/video.vue b/src/views/page/video.vue
index ad9441ba..2dbd3ba3 100644
--- a/src/views/page/video.vue
+++ b/src/views/page/video.vue
@@ -1,783 +1,744 @@
 <template>
-	<ScaleBox
-	    :width="1920"
-	    :height="1080"
-	    bgc="transparent"
-	    :delay="100"
-	    :isFlat="false"
-	  >
-	    <div class="cont" >
-	    	<div class="left_cont">
-	    		<div class="top">
-	    			<div class="title">
-	    				报警资源
-	    			</div>
-	    			<div style="display:flex;margin-top:5px;">
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;">
-	    					<div style="display:flex;width:100%;">
-	    						<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;">
-	    							<set-up />
-	    						</el-icon>
-	    						<div style="vertical-align: middle;margin-left:10px;text-align: center;">
-	    							<p style="color:#727373;font-size:14px;">接入数量</p>
-	    							<div style="margin-top:10px;">
-	    								<span class="fp">0</span>
-	    								<span class="fp">3</span>
-	    								<span class="fp">1</span>
-	    								<span class="fp">2</span>
-	    								<span class="fp">5</span>
-	    							</div>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:10px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;">
-	    					<div style="display:flex;width:100%;">
-	    						<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;">
-	    							<set-up />
-	    						</el-icon>
-	    						<div style="vertical-align: middle;margin-left:10px;text-align: center;">
-	    							<p style="color:#727373;font-size:14px;">运营单位</p>
-	    							<div style="margin-top:10px;">
-	    								<span class="fp">0</span>
-	    								<span class="fp">3</span>
-	    								<span class="fp">1</span>
-	    								<span class="fp">2</span>
-	    								<span class="fp">5</span>
-	    							</div>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:10px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    			</div>
-	    			<div style="display:flex;margin-top:10px;">
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
-	    					<div style="width:100%;">
-	    						<span
-	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
-	    						<span
-	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警点位</span>
-	    					</div>
-	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
-	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
-	    					</div>
-	    					<div style="display:flex;justify-content: center;margin-top:10px;">
-	    						<div style="margin-right:30px;text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								总数</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    						<div style="text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								在线</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:5px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
-	    					<div style="width:100%;">
-	    						<span
-	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
-	    						<span
-	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">安保人员</span>
-	    					</div>
-	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
-	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
-	    					</div>
-	    					<div style="display:flex;justify-content: center;margin-top:10px;">
-	    						<div style="margin-right:30px;text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								总数</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    						<div style="text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								在线</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:5px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    			</div>
-	    			<div style="display:flex;margin-top:10px;">
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
-	    					<div style="width:100%;">
-	    						<span
-	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
-	    						<span
-	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警复核</span>
-	    					</div>
-	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
-	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
-	    					</div>
-	    					<div style="display:flex;justify-content: center;margin-top:10px;">
-	    						<div style="margin-right:30px;text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								总数</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    						<div style="text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								在线</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:5px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
-	    					<div style="width:100%;">
-	    						<span
-	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
-	    						<span
-	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">智能预警</span>
-	    					</div>
-	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
-	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
-	    					</div>
-	    					<div style="display:flex;justify-content: center;margin-top:10px;">
-	    						<div style="margin-right:30px;text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								总数</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    						<div style="text-align:center;">
-	    							<p
-	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
-	    								在线</p>
-	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
-	    						</div>
-	    					</div>
-	    					<div style="text-align: center;margin-top:5px;">
-	    						<span
-	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
-	    						<el-progress
-	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
-	    					</div>
-	    				</div>
-	    			</div>
-	    		</div>
-	    		<div class="bttom">
-	    			<div class="title">
-	    				行业单位
-	    			</div>
-	    			<div id="ecarts" style="width:100%;height:100px;">
-	    		
-	    			</div>
-	    			<div>
-	    				<el-table :data="tableData" stripe style="width: 100%;" height="90">
-	    					<el-table-column prop="a" label="行业名称" align="center" />
-	    					<el-table-column prop="b" label="总数" align="center" />
-	    					<el-table-column prop="c" label="在线总数" align="center" />
-	    					<el-table-column prop="d" label="在线率" align="center" />
-	    				</el-table>
-	    			</div>
-	    		</div>
-	    		<div class="cen">
-	    			<div style="width:100%;display: flex;">
-	    				<div class="title">
-	    					运营单位
-	    				</div>
-	    				<div style="margin-left:30%;margin-top:10px;">
-	    					<span class="fp1">0</span>
-	    					<span class="fp1">3</span>
-	    					<span class="fp1">5</span>
-	    				</div>
-	    				<div style="text-align: center;margin-top:3px;">
-	    					<p style="color:rgb(63, 63, 63);">在线率</p>
-	    					<el-progress style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
-	    						:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
-	    				</div>
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<dv-scroll-board :config="config" style="width:100%;height:180px" />
-	    			</div>
-	    		</div>
-	    		
-	    	</div>
-	    	<div class="cont" id="myMap">
-	    
-	    	</div>
-	    	<div
-	    		style="width:40%;position: absolute;left:32%;bottom:20px;z-index: 999999;color: #000;display: flex;background:#7584A3;color:#fff;padding:5px;">
-	    		<div @click="totab('1')" :class="indexdb=='1'?'top': 'tops'">长沙市</div>
-	    		<div @click="totab('2')" :class="indexdb=='2'?'top': 'tops'">株洲市 </div>
-	    		<div @click="totab('3')" :class="indexdb=='3'?'top': 'tops'">湘潭市</div>
-	    		<div @click="totab('4')" :class="indexdb=='4'?'top': 'tops'">邵阳市 </div>
-	    		<div @click="totab('5')" :class="indexdb=='5'?'top': 'tops'">娄底市</div>
-	    		<div @click="totab('6')" :class="indexdb=='6'?'top': 'tops'">常德市</div>
-	    		<div @click="totab('7')" :class="indexdb=='7'?'top': 'tops'">岳阳市</div>
-	    		<div @click="totab('8')" :class="indexdb=='8'?'top': 'tops'">衡阳市</div>
-	    		<div @click="totab('9')" :class="indexdb=='9'?'top': 'tops'">永州市</div>
-	    		<div @click="totab('10')" :class="indexdb=='10'?'top': 'tops'">郴州市</div>
-	    		<div @click="totab('11')" :class="indexdb=='11'?'top': 'tops'">怀化市</div>
-	    		<div @click="totab('12')" :class="indexdb=='12'?'top': 'tops'">张家界市</div>
-	    		<div @click="totab('13')" :class="indexdb=='13'?'top': 'tops'">湘西</div>
-	    		<div @click="totab('14')" :class="indexdb=='14'?'top': 'tops'">益阳市</div>
-	    	</div>
-	    
-	    	<div class="right_cont">
-	    		<div class="top">
-	    			<div style="width:100%;display: flex;">
-	    				<div class="title">
-	    					今日警情
-	    				</div>
-	    				<div style="margin-left:28%;">
-	    					<a-segmented style="display:inline-block;width:125px" v-model:value="value" :options="data"
-	    						size="small" />
-	    				</div>
-	    			</div>
-	    			<div style="width:100%;text-align: center;margin:10px 0px;">
-	    				<div>
-	    					<span class="fp12">0</span>
-	    					<span class="fp12">0</span>
-	    					<span class="fp12">3</span>
-	    					<span class="fp12">5</span>
-	    				</div>
-	    				<div style="margin: 10px 0px;width:100%;text-align: center;">
-	    					<div style="display:inline-block;text-align: center;">
-	    						<span style="color: #363635;">同比</span>
-	    						<a-statistic :value="11.28" :precision="2" suffix="%"
-	    							:value-style="{ color: '#3f8600',fontSize:'15px' }"
-	    							style="display: inline-block;margin-right:50px;">
-	    							<template #prefix>
-	    								<arrow-up-outlined />
-	    							</template>
-	    						</a-statistic>
-	    					</div>
-	    					<div style="display:inline-block;text-align: center;">
-	    						<span style="color: #363635;">环比</span>
-	    						<a-statistic :value="11.28" :precision="2" suffix="%"
-	    							:value-style="{ color: '#ff0000',fontSize:'15px' }" style="display: inline-block;">
-	    							<template #prefix>
-	    								<arrow-down-outlined />
-	    							</template>
-	    						</a-statistic>
-	    					</div>
-	    				</div>
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<div style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;">实时预警</div>
-	    				<a-dropdown style="display:inline-block;width:150px">
-	    					<template #overlay>
-	    						<a-menu @click="handleMenuClick">
-	    							<a-menu-item key="1">
-	    								<UserOutlined />
-	    								1st menu item
-	    							</a-menu-item>
-	    							<a-menu-item key="2">
-	    								<UserOutlined />
-	    								2nd menu item
-	    							</a-menu-item>
-	    							<a-menu-item key="3">
-	    								<UserOutlined />
-	    								3rd item
-	    							</a-menu-item>
-	    						</a-menu>
-	    					</template>
-	    					<a-button size="small" style="margin-left:45%;background: #DFECFC;color:#A6B2C3;">
-	    						全部类型
-	    						<DownOutlined />
-	    					</a-button>
-	    				</a-dropdown>
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<dv-scroll-board :config="config1" style="width:100%;height:200px" />
-	    			</div>
-	    		</div>
-	    		<div class="cen">
-	    			<div style="width:100%;display: flex;">
-	    				<div class="title">
-	    					智能预警
-	    				</div>
-	    				<div style="margin-left:43%;margin-top:10px;">
-	    					<span class="fp1">0</span>
-	    					<span class="fp1">3</span>
-	    					<span class="fp1">5</span>
-	    				</div>
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<div
-	    					style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;">
-	    					实时预警</div>
-	    				<a-segmented style="display:inline-block;width:150px;margin-left:95px;" v-model:value="value"
-	    					:options="data" size="small" />
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<dv-scroll-board :config="config1" style="width:100%;height:180px" />
-	    			</div>
-	    		</div>
-	    		<div class="bttom">
-	    			<div style="width:100%;display: flex;">
-	    				<div class="title">
-	    					智能布控
-	    				</div>
-	    				<div style="margin-left:43%;margin-top:10px;">
-	    					<span class="fp1">0</span>
-	    					<span class="fp1">3</span>
-	    					<span class="fp1">5</span>
-	    				</div>
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<a-segmented style="display:inline-block;width:210px;" v-model:value="value" :options="data1"
-	    					size="small" />
-	    				<a-segmented style="display:inline-block;width:110px;margin-left:15px;" v-model:value="value"
-	    					:options="data" size="small" />
-	    			</div>
-	    			<div style="margin-top:5px;">
-	    				<dv-scroll-board :config="config1" style="width:100%;height:170px" />
-	    			</div>
-	    		</div>
-	    	</div>
-	    </div>
-	  </ScaleBox>
-	
+  <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
+    <div class="cont">
+      <div class="left_cont">
+        <div class="top">
+          <div class="title">报警资源</div>
+          <div style="display: flex; margin-top: 5px">
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
+              <div style="display: flex; width: 100%">
+                <el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
+                  <set-up />
+                </el-icon>
+                <div style="vertical-align: middle; margin-left: 10px; text-align: center">
+                  <p style="color: #727373; font-size: 14px">接入数量</p>
+                  <div style="margin-top: 10px">
+                    <span class="fp">0</span>
+                    <span class="fp">3</span>
+                    <span class="fp">1</span>
+                    <span class="fp">2</span>
+                    <span class="fp">5</span>
+                  </div>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 10px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="16"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
+              <div style="display: flex; width: 100%">
+                <el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
+                  <set-up />
+                </el-icon>
+                <div style="vertical-align: middle; margin-left: 10px; text-align: center">
+                  <p style="color: #727373; font-size: 14px">运营单位</p>
+                  <div style="margin-top: 10px">
+                    <span class="fp">0</span>
+                    <span class="fp">3</span>
+                    <span class="fp">1</span>
+                    <span class="fp">2</span>
+                    <span class="fp">5</span>
+                  </div>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 10px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="16"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; margin-top: 10px">
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
+              <div style="width: 100%">
+                <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
+                <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">报警点位</span>
+              </div>
+              <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
+                <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
+              </div>
+              <div style="display: flex; justify-content: center; margin-top: 10px">
+                <div style="margin-right: 30px; text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+                <div style="text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 5px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="14"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
+              <div style="width: 100%">
+                <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
+                <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">安保人员</span>
+              </div>
+              <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
+                <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
+              </div>
+              <div style="display: flex; justify-content: center; margin-top: 10px">
+                <div style="margin-right: 30px; text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+                <div style="text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 5px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="14"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; margin-top: 10px">
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
+              <div style="width: 100%">
+                <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
+                <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">报警复核</span>
+              </div>
+              <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
+                <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
+              </div>
+              <div style="display: flex; justify-content: center; margin-top: 10px">
+                <div style="margin-right: 30px; text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+                <div style="text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 5px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="14"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+            <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
+              <div style="width: 100%">
+                <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
+                <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">智能预警</span>
+              </div>
+              <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
+                <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
+              </div>
+              <div style="display: flex; justify-content: center; margin-top: 10px">
+                <div style="margin-right: 30px; text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+                <div style="text-align: center">
+                  <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
+                  <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
+                </div>
+              </div>
+              <div style="text-align: center; margin-top: 5px">
+                <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
+                <el-progress
+                  style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
+                  :text-inside="true"
+                  color="#8C98B2"
+                  :stroke-width="14"
+                  :percentage="70"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bttom">
+          <div class="title">行业单位</div>
+          <div id="ecarts" style="width: 100%; height: 100px"></div>
+          <div>
+            <el-table :data="tableData" stripe style="width: 100%" height="90">
+              <el-table-column prop="a" label="行业名称" align="center" />
+              <el-table-column prop="b" label="总数" align="center" />
+              <el-table-column prop="c" label="在线总数" align="center" />
+              <el-table-column prop="d" label="在线率" align="center" />
+            </el-table>
+          </div>
+        </div>
+        <div class="cen">
+          <div style="width: 100%; display: flex">
+            <div class="title">运营单位</div>
+            <div style="margin-left: 30%; margin-top: 10px">
+              <span class="fp1">0</span>
+              <span class="fp1">3</span>
+              <span class="fp1">5</span>
+            </div>
+            <div style="text-align: center; margin-top: 3px">
+              <p style="color: rgb(63, 63, 63)">在线率</p>
+              <el-progress style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px" :text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
+            </div>
+          </div>
+          <div style="margin-top: 5px">
+            <dv-scroll-board :config="config" style="width: 100%; height: 180px" />
+          </div>
+        </div>
+      </div>
+      <div class="cont" id="myMap"></div>
+      <div style="width: 40%; position: absolute; left: 32%; bottom: 20px; z-index: 999999; color: #000; display: flex; background: #7584a3; color: #fff; padding: 5px">
+        <div @click="totab('1')" :class="indexdb == '1' ? 'top' : 'tops'">长沙市</div>
+        <div @click="totab('2')" :class="indexdb == '2' ? 'top' : 'tops'">株洲市</div>
+        <div @click="totab('3')" :class="indexdb == '3' ? 'top' : 'tops'">湘潭市</div>
+        <div @click="totab('4')" :class="indexdb == '4' ? 'top' : 'tops'">邵阳市</div>
+        <div @click="totab('5')" :class="indexdb == '5' ? 'top' : 'tops'">娄底市</div>
+        <div @click="totab('6')" :class="indexdb == '6' ? 'top' : 'tops'">常德市</div>
+        <div @click="totab('7')" :class="indexdb == '7' ? 'top' : 'tops'">岳阳市</div>
+        <div @click="totab('8')" :class="indexdb == '8' ? 'top' : 'tops'">衡阳市</div>
+        <div @click="totab('9')" :class="indexdb == '9' ? 'top' : 'tops'">永州市</div>
+        <div @click="totab('10')" :class="indexdb == '10' ? 'top' : 'tops'">郴州市</div>
+        <div @click="totab('11')" :class="indexdb == '11' ? 'top' : 'tops'">怀化市</div>
+        <div @click="totab('12')" :class="indexdb == '12' ? 'top' : 'tops'">张家界市</div>
+        <div @click="totab('13')" :class="indexdb == '13' ? 'top' : 'tops'">湘西</div>
+        <div @click="totab('14')" :class="indexdb == '14' ? 'top' : 'tops'">益阳市</div>
+      </div>
+
+      <div class="right_cont">
+        <div class="top">
+          <div style="width: 100%; display: flex">
+            <div class="title">今日警情</div>
+            <div style="margin-left: 28%">
+              <a-segmented style="display: inline-block; width: 125px" v-model:value="value" :options="data" size="small" />
+            </div>
+          </div>
+          <div style="width: 100%; text-align: center; margin: 10px 0px">
+            <div>
+              <span class="fp12">0</span>
+              <span class="fp12">0</span>
+              <span class="fp12">3</span>
+              <span class="fp12">5</span>
+            </div>
+            <div style="margin: 10px 0px; width: 100%; text-align: center">
+              <div style="display: inline-block; text-align: center">
+                <span style="color: #363635">同比</span>
+                <a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#3f8600', fontSize: '15px'}" style="display: inline-block; margin-right: 50px">
+                  <template #prefix>
+                    <arrow-up-outlined />
+                  </template>
+                </a-statistic>
+              </div>
+              <div style="display: inline-block; text-align: center">
+                <span style="color: #363635">环比</span>
+                <a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#ff0000', fontSize: '15px'}" style="display: inline-block">
+                  <template #prefix>
+                    <arrow-down-outlined />
+                  </template>
+                </a-statistic>
+              </div>
+            </div>
+          </div>
+          <div style="margin-top: 5px">
+            <div style="width: 90px; background: #dfecfc; color: #a6b2c3; height: 20px; line-height: 20px; padding-left: 5px; display: inline-block">实时预警</div>
+            <a-dropdown style="display: inline-block; width: 150px">
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item key="1">
+                    <UserOutlined />
+                    1st menu item
+                  </a-menu-item>
+                  <a-menu-item key="2">
+                    <UserOutlined />
+                    2nd menu item
+                  </a-menu-item>
+                  <a-menu-item key="3">
+                    <UserOutlined />
+                    3rd item
+                  </a-menu-item>
+                </a-menu>
+              </template>
+              <a-button size="small" style="margin-left: 45%; background: #dfecfc; color: #a6b2c3">
+                全部类型
+                <DownOutlined />
+              </a-button>
+            </a-dropdown>
+          </div>
+          <div style="margin-top: 5px">
+            <dv-scroll-board :config="config1" style="width: 100%; height: 200px" />
+          </div>
+        </div>
+        <div class="cen">
+          <div style="width: 100%; display: flex">
+            <div class="title">智能预警</div>
+            <div style="margin-left: 43%; margin-top: 10px">
+              <span class="fp1">0</span>
+              <span class="fp1">3</span>
+              <span class="fp1">5</span>
+            </div>
+          </div>
+          <div style="margin-top: 5px">
+            <div style="width: 90px; background: #dfecfc; color: #a6b2c3; height: 20px; line-height: 20px; padding-left: 5px; display: inline-block">实时预警</div>
+            <a-segmented style="display: inline-block; width: 150px; margin-left: 95px" v-model:value="value" :options="data" size="small" />
+          </div>
+          <div style="margin-top: 5px">
+            <dv-scroll-board :config="config1" style="width: 100%; height: 180px" />
+          </div>
+        </div>
+        <div class="bttom">
+          <div style="width: 100%; display: flex">
+            <div class="title">智能布控</div>
+            <div style="margin-left: 43%; margin-top: 10px">
+              <span class="fp1">0</span>
+              <span class="fp1">3</span>
+              <span class="fp1">5</span>
+            </div>
+          </div>
+          <div style="margin-top: 5px">
+            <a-segmented style="display: inline-block; width: 210px" v-model:value="value" :options="data1" size="small" />
+            <a-segmented style="display: inline-block; width: 110px; margin-left: 15px" v-model:value="value" :options="data" size="small" />
+          </div>
+          <div style="margin-top: 5px">
+            <dv-scroll-board :config="config1" style="width: 100%; height: 170px" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ScaleBox>
 </template>
 
 <script lang="ts" setup>
-	import ScaleBox from "vue3-scale-box";
-	import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
-	import { Ref, ref, watch, onMounted, reactive } from 'vue';
-	import * as echarts from "echarts";
-	import 'echarts-gl';
-	import mapJson from "./js/hunan.json";
-	import api from "@/axios";
-	onMounted(
-		() => {
-			init();
-			initMap();
-		}
-	);
-	const tableData = ref([{
-		a: '党政机关',
-		b: '1010',
-		c: '988',
-		d: '70%'
-	}, {
-		a: '党政机关',
-		b: '1010',
-		c: '988',
-		d: '70%'
-	}]);
-	const indexdb = ref('1')
-	const totab = (data) => {
-		indexdb.value = data;
-	};
-	const init = () => {
-		// 基于准备好的dom，初始化echarts实例
-		var myChart = echarts.init(document.getElementById('ecarts'));
-		// 指定图表的配置项和数据
-		var  option = {
-			xAxis: {
-				type: 'category',
-				data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市',]
-			},
-			yAxis: {
-				type: 'value'
-			},
-			grid: {
-				left: "2%",
-				right: "4%",
-				top: "10%",
-				bottom: "1%",
-				containLabel: true,
-			},
-			series: [
-				{
-					data: [120, 200, 150, 80, 70, 110, 130],
-					type: 'bar'
-				}
-			]
-		};
-		// 使用刚指定的配置项和数据显示图表。
-		myChart.setOption(option);
-	};
-	const size = ref('small');
-	const data1 = reactive(['人脸布控', '车辆布控', '信息布控']);
-	const data = reactive(['日', '周', '月', '年']);
-	const value = ref(data[0]);
-	const config1 = reactive({
-		header: ['事件', '时间', '位置', '状态'],
-		data: [
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
-			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
-		],
-		headerBGC: '#F3FDFF',
-		oddRowBGC: '#FAFBFD',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		columnWidth: [120, 100, 80, 80],
-		align: ['center','center','center','center'],
-	})
-	const config12 = reactive({
-		header: ['事件', '时间', '位置', '状态'],
-		data: [
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
-		],
-		headerHeight: '20',
-		headerBGC: '#F3FDFF',
-		oddRowBGC: '#FAFBFD',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		columnWidth: [50],
-		align: ['center','center','center','center'],
-	})
-	const config = reactive({
-		header: ['名称', '时间', '地区', '状态'],
-		columnWidth: [120, 100, 80, 80],
-		data: [
-			['隆吉平台', '2024-1-24', '长沙望城区',  '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
-		],
-		headerBGC: '#F3FDFF',
-		oddRowBGC: '#FAFBFD',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		align: ['center','center','center','center'],
-	})
-	const initMap = () => {
-		let myChart = echarts.init(document.getElementById('myMap'));
-		myChart.showLoading();
-		myChart.hideLoading();
-		echarts.registerMap('myMap', mapJson);
-		var option = {
-			tooltip: {
-				trigger: 'item',
-				textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
-				backgroundColor: '#092b6a',
-				formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 ',
-
-			},
-			series: [
-				{
-					type: 'map3D',
-					name: '地图',
-					selectedMode: 'single', // 地图高亮单选
-					regionHeight: 4, // 地图高度
-					map: 'myMap',
-					viewControl: {
-						distance: 168, // 地图视角 控制初始大小
-						alpha: 50,// 倾斜角度
-						rotateSensitivity: [1, 1]
-					},
-					label: {
-						show: true, // 是否显示名字
-						color: '#333f5a', // 文字颜色
-						fontSize: 18, // 文字大小
-						fontWeight: 'bold', // 文字大小
-					},
-					itemStyle: {
-						color: '#9bcafc', // 地图背景颜色
-						borderWidth: 1, // 分界线wdith
-						borderColor: '#a4d8f0', // 分界线颜色
-						opacity: 0.9
-					},
-					emphasis: {
-						label: {
-							show: true, // 是否显示高亮
-							textStyle: {
-								color: '#fff' // 高亮文字颜色
-							}
-						},
-						itemStyle: {
-							color: '#3a69c1', // 地图高亮颜色
-							borderWidth: 10, // 分界线wdith
-							borderColor: '#6BECF5'// 分界线颜色
-						}
-					},
-					light: {
-						main: {
-							color: '#fff',
-							intensity: 1,
-							shadow: true,
-							shadowQuality: 'high',
-							alpha: 25, //
-							beta: 20
-						},
-						ambient: {
-							color: '#fff',
-							intensity: 0.6
-						}
-					}
-				}
-			]
-		};
-		myChart.setOption(option);
-		window.addEventListener('resize', function () {
-			myChart.resize();
-		});
-	};
+// @ts-ignore
+import ScaleBox from 'vue3-scale-box'
+import {ArrowUpOutlined, ArrowDownOutlined} from '@ant-design/icons-vue'
+import {Ref, ref, watch, onMounted, reactive} from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-gl'
+import mapJson from './js/hunan.json'
+import api from '@/axios'
+onMounted(() => {
+  init()
+  initMap()
+})
+const tableData = ref([
+  {
+    a: '党政机关',
+    b: '1010',
+    c: '988',
+    d: '70%'
+  },
+  {
+    a: '党政机关',
+    b: '1010',
+    c: '988',
+    d: '70%'
+  }
+])
+const indexdb = ref('1')
+const totab = (data: any) => {
+  indexdb.value = data
+}
+const init = () => {
+  // 基于准备好的dom，初始化echarts实例
+  var myChart = echarts.init(document.getElementById('ecarts'))
+  // 指定图表的配置项和数据
+  var option = {
+    xAxis: {
+      type: 'category',
+      data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    grid: {
+      left: '2%',
+      right: '4%',
+      top: '10%',
+      bottom: '1%',
+      containLabel: true
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar'
+      }
+    ]
+  }
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+const size = ref('small')
+const data1 = reactive(['人脸布控', '车辆布控', '信息布控'])
+const data = reactive(['日', '周', '月', '年'])
+const value = ref(data[0])
+const config1 = reactive({
+  header: ['事件', '时间', '位置', '状态'],
+  data: [
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>']
+  ],
+  headerBGC: '#F3FDFF',
+  oddRowBGC: '#FAFBFD',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  columnWidth: [120, 100, 80, 80],
+  align: ['center', 'center', 'center', 'center']
+})
+const config12 = reactive({
+  header: ['事件', '时间', '位置', '状态'],
+  data: [
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
+    ['人脸预警', '2024-1-24', '长沙望城区', '已转发']
+  ],
+  headerHeight: '20',
+  headerBGC: '#F3FDFF',
+  oddRowBGC: '#FAFBFD',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  columnWidth: [50],
+  align: ['center', 'center', 'center', 'center']
+})
+const config = reactive({
+  header: ['名称', '时间', '地区', '状态'],
+  columnWidth: [120, 100, 80, 80],
+  data: [
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
+    ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>']
+  ],
+  headerBGC: '#F3FDFF',
+  oddRowBGC: '#FAFBFD',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  align: ['center', 'center', 'center', 'center']
+})
+const initMap = () => {
+  let myChart = echarts.init(document.getElementById('myMap'))
+  myChart.showLoading()
+  myChart.hideLoading()
+  // @ts-ignore
+  echarts.registerMap('myMap', mapJson)
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
+      backgroundColor: '#092b6a',
+      formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 '
+    },
+    series: [
+      {
+        type: 'map3D',
+        name: '地图',
+        selectedMode: 'single', // 地图高亮单选
+        regionHeight: 4, // 地图高度
+        map: 'myMap',
+        viewControl: {
+          distance: 168, // 地图视角 控制初始大小
+          alpha: 50, // 倾斜角度
+          rotateSensitivity: [1, 1]
+        },
+        label: {
+          show: true, // 是否显示名字
+          color: '#333f5a', // 文字颜色
+          fontSize: 18, // 文字大小
+          fontWeight: 'bold' // 文字大小
+        },
+        itemStyle: {
+          color: '#9bcafc', // 地图背景颜色
+          borderWidth: 1, // 分界线wdith
+          borderColor: '#a4d8f0', // 分界线颜色
+          opacity: 0.9
+        },
+        emphasis: {
+          label: {
+            show: true, // 是否显示高亮
+            textStyle: {
+              color: '#fff' // 高亮文字颜色
+            }
+          },
+          itemStyle: {
+            color: '#3a69c1', // 地图高亮颜色
+            borderWidth: 10, // 分界线wdith
+            borderColor: '#6BECF5' // 分界线颜色
+          }
+        },
+        light: {
+          main: {
+            color: '#fff',
+            intensity: 1,
+            shadow: true,
+            shadowQuality: 'high',
+            alpha: 25, //
+            beta: 20
+          },
+          ambient: {
+            color: '#fff',
+            intensity: 0.6
+          }
+        }
+      }
+    ]
+  }
+  myChart.setOption(option)
+  window.addEventListener('resize', function () {
+    myChart.resize()
+  })
+}
 </script>
 
 <style scoped lang="scss">
-	:deep(.el-table) {
-		background-color: transparent;
-		color: #000;
+:deep(.el-table) {
+	background-color: transparent;
+	color: #000;
 
-		--el-table-border: {
-			none
+	--el-table-border: {
+		none
+	}
+
+	;
+
+	--el-table-border-color: {
+		none
+	}
+
+	;
+}
+
+:deep(.el-table th.el-table__cell) {
+	background-color: #F3FDFF;
+}
+
+:deep(.el-table thead) {
+	color: #000000;
+}
+
+:deep(.el-table tr) {
+	background-color: #fff;
+}
+
+:deep(.el-table__body tr.current-row > td) {
+	// background: #2cabff !important;
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
+	// background-color:  #13306A !important;
+}
+
+:deep(.el-table th.el-table__cell) {
+	// background-color:#13306A;
+}
+
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented .ant-segmented-item-selected) {
+	background-color: #DFECFC;
+	color: #000;
+}
+
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented) {
+	background-color: #E1E8FC;
+	color: #BEC6DA;
+}
+
+:deep(.dv-scroll-board) {
+	color: #000;
+}
+
+:deep(.dv-scroll-board .header) {
+	border-bottom: 1px solid #E8E8E9;
+}
+
+:deep(.dv-scroll-board .rows .row-item) {
+	border-bottom: 1px solid #E8E8E9;
+}
+
+:deep(.el-table .el-table__cell) {
+	padding: 2px 0;
+}
+
+.tops {
+	margin-right: 10px;
+	padding: 8px 5px;
+	text-align: center;
+	// border-bottom: 2px solid #2B78C0;
+}
+
+.top {
+	margin-right: 10px;
+	// padding: 8px 5px;
+	text-align: center;
+	border-bottom: 2px solid #2B78C0;
+}
+
+.title {
+	background: #DFECFC;
+	color: #8892AD;
+	width: 30%;
+	height: 30px;
+	line-height: 30px;
+	// margin: 0 auto;
+	text-align: center;
+	border-radius: 0 0 10px 10px;
+}
+
+.fp {
+	background: #EAF2FF;
+	color: #9CA5B6;
+	font-size: 12px;
+	padding: 3px 2px;
+	font-size: 12px;
+	font-weight: 500;
+	margin-right: 2px;
+	border-radius: 2px;
+}
+
+.fp1 {
+	background: #8C98B2;
+	font-size: 12px;
+	padding: 5px 4px;
+	font-size: 12px;
+	font-weight: 500;
+	margin-right: 2px;
+	border-radius: 2px;
+}
+
+.fp12 {
+	background: #8C98B2;
+	font-size: 20px !important;
+	padding: 5px 4px;
+	font-size: 12px;
+	font-weight: 500;
+	margin-right: 2px;
+	border-radius: 2px;
+}
+
+.cont {
+	width: 100%;
+	height: 100%;
+	background: #E5F1F7;
+
+	.left_cont {
+		width: 450px;
+		height: 98%;
+		z-index: 999;
+		position: absolute;
+		top: 2px;
+		left: 5px;
+		.top {
+			width: 100%;
+			height: 408px;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
 		}
 
-		;
-
-		--el-table-border-color: {
-			none
+		.cen {
+			margin-top: 1%;
+			width: 100%;
+			height: 26%;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
 		}
 
-		;
-	}
-
-	:deep(.el-table th.el-table__cell) {
-		background-color: #F3FDFF;
-	}
-
-	:deep(.el-table thead) {
-		color: #000000;
-	}
-
-	:deep(.el-table tr) {
-		background-color: #fff;
-	}
-
-	:deep(.el-table__body tr.current-row > td) {
-		// background: #2cabff !important;
-	}
-
-	:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
-		// background-color:  #13306A !important;
-	}
-
-	:deep(.el-table th.el-table__cell) {
-		// background-color:#13306A;
-	}
-
-	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented .ant-segmented-item-selected) {
-		background-color: #DFECFC;
-		color: #000;
-	}
-
-	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented) {
-		background-color: #E1E8FC;
-		color: #BEC6DA;
-	}
-
-	:deep(.dv-scroll-board) {
-		color: #000;
-	}
-
-	:deep(.dv-scroll-board .header) {
-		border-bottom: 1px solid #E8E8E9;
-	}
-
-	:deep(.dv-scroll-board .rows .row-item) {
-		border-bottom: 1px solid #E8E8E9;
-	}
-
-	:deep(.el-table .el-table__cell) {
-		padding: 2px 0;
-	}
-
-	.tops {
-		margin-right: 10px;
-		padding: 8px 5px;
-		text-align: center;
-		// border-bottom: 2px solid #2B78C0;
-	}
-
-	.top {
-		margin-right: 10px;
-		// padding: 8px 5px;
-		text-align: center;
-		border-bottom: 2px solid #2B78C0;
-	}
-
-	.title {
-		background: #DFECFC;
-		color: #8892AD;
-		width: 30%;
-		height: 30px;
-		line-height: 30px;
-		// margin: 0 auto;
-		text-align: center;
-		border-radius: 0 0 10px 10px;
-	}
-
-	.fp {
-		background: #EAF2FF;
-		color: #9CA5B6;
-		font-size: 12px;
-		padding: 3px 2px;
-		font-size: 12px;
-		font-weight: 500;
-		margin-right: 2px;
-		border-radius: 2px;
-	}
-
-	.fp1 {
-		background: #8C98B2;
-		font-size: 12px;
-		padding: 5px 4px;
-		font-size: 12px;
-		font-weight: 500;
-		margin-right: 2px;
-		border-radius: 2px;
-	}
-
-	.fp12 {
-		background: #8C98B2;
-		font-size: 20px !important;
-		padding: 5px 4px;
-		font-size: 12px;
-		font-weight: 500;
-		margin-right: 2px;
-		border-radius: 2px;
+		.bttom {
+			margin-top: 1%;
+			width: 100%;
+			height: 26%;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
+		}
 	}
 
 	.cont {
-		width: 100%;
-		height: 100%;
-		background: #E5F1F7;
+		width: calc(100% - 920px);
+		height: 98%;
+		z-index: 999;
+		position: absolute;
+		left: 460px;
+		top: 0.5%;
+		// background: red;
+	}
 
-		.left_cont {
-			width: 450px;
-			height: 98%;
-			z-index: 999;
-			position: absolute;
-			top: 2px;
-			left: 5px;
-			.top {
-				width: 100%;
-				height: 408px;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
+	.right_cont {
+		width: 450px;
+		height: 98%;
+		z-index: 999;
+		position: absolute;
+		right: 5px;
+		top: 2px;
 
-			.cen {
-				margin-top: 1%;
-				width: 100%;
-				height: 26%;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
-
-			.bttom {
-				margin-top: 1%;
-				width: 100%;
-				height: 26%;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
+		.top {
+			width: 100%;
+			height: 40%;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
 		}
 
-		.cont {
-			width: calc(100% - 920px);
-			height: 98%;
-			z-index: 999;
-			position: absolute;
-			left: 460px;
-			top: 0.5%;
-			// background: red;
+		.cen {
+			margin-top: 1%;
+			width: 100%;
+			height: 30%;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
 		}
 
-		.right_cont {
-			width: 450px;
-			height: 98%;
-			z-index: 999;
-			position: absolute;
-			right: 5px;
-			top: 2px;
-
-			.top {
-				width: 100%;
-				height: 40%;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
-
-			.cen {
-				margin-top: 1%;
-				width: 100%;
-				height: 30%;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
-
-			.bttom {
-				margin-top: 1%;
-				width: 100%;
-				height: 30%;
-				background: #fff;
-				border: 1px solid #E9EBEC;
-				overflow: auto;
-			}
+		.bttom {
+			margin-top: 1%;
+			width: 100%;
+			height: 30%;
+			background: #fff;
+			border: 1px solid #E9EBEC;
+			overflow: auto;
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>