From ca78a540905843a791a0d13d0ed28cbf63991b56 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Thu, 8 Aug 2024 17:20:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=A6=96=E9=A1=B5=20indexmin?=
 =?UTF-8?q?=20=E9=A1=B5=E9=9D=A2ts=E7=88=86=E7=BA=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

解决首页 indexmin 页面ts爆红
---
 src/views/page/index.vue    |    5 +-
 src/views/page/indexMim.vue | 2140 ++++++++++++++++++-----------------
 2 files changed, 1082 insertions(+), 1063 deletions(-)

diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index 525e0c30..ec109cd8 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -673,7 +673,7 @@ const gettree4 = (data: any) => {
       name: localStorage.getItem('loginname'),
       industry: data,
     })
-    .then((res) => {
+    .then((res: JsonResult<any>) => {
       if (res.code == 0) {
         api
           .post('/multialarm/client/alarm_point/getlist', {
@@ -686,7 +686,8 @@ const gettree4 = (data: any) => {
             })
             let data = [res.data]
             data.forEach((tree) => {
-              console.log(tree)
+              console.log('tree______', tree)
+              tree.children.reverse() // 长沙市排在前
               printLeafs(tree, res1.data)
             })
             treedataall.value = [...data]
diff --git a/src/views/page/indexMim.vue b/src/views/page/indexMim.vue
index 5fe2ffda..5ee05319 100644
--- a/src/views/page/indexMim.vue
+++ b/src/views/page/indexMim.vue
@@ -1,1121 +1,1139 @@
 <template>
-	<div class="box">
-		<div class="left">
-			<div class="left_top">
-				<div class="title1">
-					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">接入总览</span>
-				</div>
-				<div style="display: flex;align-items: center;justify-content: center;padding: 10px 0px;">
-					<img style="width:15%;height:15%;" src="./indeximag/图2.png" alt="" />
-					<div style="text-align: center;">
-						<p style="font-size: 13px;margin-bottom: 10px;">接入数量</p>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',5)}}</span>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',4)}}</span>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',3)}}</span>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',2)}}</span>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',1)}}</span>
-						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',0)}}</span>
-					</div>
-				</div>
-				<div id="EcharRef" style="width:98%; height:54%;"></div>
-			</div>
-			<div class="left_cen">
-				<div class="title1">
-					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">运营单位</span>
-				</div>
-				<div style="display: flex;justify-content:space-between;margin-top: 10px;">
-					<div style="margin-left:30px;">
-						<span style="margin-right:5px;font-size: 13px;">接入数量</span>
-						<span class="fp">{{getNthChar(config.data.length+'',2)}}</span>
-						<span class="fp">{{getNthChar(config.data.length+'',1)}}</span>
-						<span class="fp">{{getNthChar(config.data.length+'',0)}}</span>
-					</div>
-					<div style="margin-right:30px;padding-top:6px;">
-						<span style="display:inline-block;font-size: 13px;">在线率</span>
-						<div style="display:inline-block;">
-							<el-progress
-								style="width:65px;display: inline-block;vertical-align: middle;margin-left:10px;margin-top: -5px;"
-								:percentage="(i/config.data.length).toFixed(2)*100" :stroke-width="15"
-								:text-inside="true"></el-progress>
-						</div>
-					</div>
-				</div>
-				<div style="width:100%;height:70%;margin-top: 5px;">
-					<dv-scroll-board :config="config" @click="row1" style="" />
-				</div>
-			</div>
-			<div class="left_bottm">
-				<div class="title1">
-					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">重点单位</span>
-				</div>
-				<div id="EcharRef1" style="width:98%; height:44%;">
+  <div class="box">
+    <div class="left">
+      <div class="left_top">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">接入总览</span>
+        </div>
+        <div style="display: flex; align-items: center; justify-content: center; padding: 10px 0px">
+          <img style="width: 15%; height: 15%" src="./indeximag/图2.png" alt="" />
+          <div style="text-align: center">
+            <p style="font-size: 13px; margin-bottom: 10px">接入数量</p>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 5) }}</span>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 4) }}</span>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 3) }}</span>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 2) }}</span>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 1) }}</span>
+            <span class="fp">{{ getNthChar(data1.alarmPointTotal + '', 0) }}</span>
+          </div>
+        </div>
+        <div id="EcharRef" style="width: 98%; height: 54%"></div>
+      </div>
+      <div class="left_cen">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">运营单位</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-top: 10px">
+          <div style="margin-left: 30px">
+            <span style="margin-right: 5px; font-size: 13px">接入数量</span>
+            <span class="fp">{{ getNthChar(config.data.length + '', 2) }}</span>
+            <span class="fp">{{ getNthChar(config.data.length + '', 1) }}</span>
+            <span class="fp">{{ getNthChar(config.data.length + '', 0) }}</span>
+          </div>
+          <div style="margin-right: 30px; padding-top: 6px">
+            <span style="display: inline-block; font-size: 13px">在线率</span>
+            <div style="display: inline-block">
+              <el-progress
+                style="width: 65px; display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: -5px"
+                :percentage="(i / config.data.length).toFixed(2) * 100"
+                :stroke-width="15"
+                :text-inside="true"
+              ></el-progress>
+            </div>
+          </div>
+        </div>
+        <div style="width: 100%; height: 70%; margin-top: 5px">
+          <dv-scroll-board :config="config" @click="row1" style="" />
+        </div>
+      </div>
+      <div class="left_bottm">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">重点单位</span>
+        </div>
+        <div id="EcharRef1" style="width: 98%; height: 44%"></div>
+        <div style="width: 100%; height: 30%; margin-top: 10px">
+          <dv-scroll-board :config="config1" style="" />
+        </div>
+      </div>
+    </div>
+    <div class="cen" id="myMap">
+      <!-- <el-button icon="el-icon-search" circle></el-button> -->
+    </div>
+    <div class="right" style="position: relative">
+      <span style="position: absolute; left: -180px; top: 12px; z-index: 9; font-size: 23px; font-weight: bold">{{ maptitle }}</span>
+      <el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
+        <el-button @click="hy()" type="primary" icon="refresh-left" circle style="position: absolute; left: -48px; top: 4px; z-index: 9"></el-button>
+      </el-tooltip>
 
-				</div>
-				<div style="width:100%;height:30%;margin-top: 10px;">
-					<dv-scroll-board :config="config1" style="" />
-				</div>
-			</div>
-		</div>
-		<div class="cen" id="myMap">
-			<!-- <el-button icon="el-icon-search" circle></el-button> -->
-		</div>
-		<div class="right" style="position: relative;">
-			<span style="position: absolute;left:-180px;top:12px;z-index:9;font-size:23px;font-weight: bold;">{{maptitle}}</span>
-			<el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
-				 <el-button @click="hy()" type="primary" icon="refresh-left" circle
-					style="position: absolute;left:-48px;top:4px;z-index:9;"></el-button>
-			</el-tooltip>
-			
+      <div class="right_top">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日警情</span>
+          <img src="" alt="" />
+        </div>
+        <div style="width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 15px">
+          <div>
+            <span style="margin-right: 5px; font-size: 13px">报警次数</span>
+            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 2) }}</span>
+            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 1) }}</span>
+            <span class="fp">{{ getNthChar(drzs.countAlarm + '', 0) }}</span>
+          </div>
+          <div style="margin-left: 30px">
+            <span style="margin-right: 5px; font-size: 13px">警情数量</span>
+            <span class="fp">{{ getNthChar(drzs.countCase + '', 1) }}</span>
+            <span class="fp">{{ getNthChar(drzs.countCase + '', 0) }}</span>
+          </div>
+        </div>
+        <div id="EcharRef2" style="width: 98%; height: 73%; margin-top: 10px"></div>
+      </div>
+      <div class="right_cen">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日报警</span>
+        </div>
+        <div style="width: 100%; height: 80%; margin-top: 10px">
+          <el-empty v-if="config2.data.length == 0" :image-size="100" description="暂无数据"></el-empty>
+          <dv-scroll-board v-else :config="config2" @click="row2" style="" />
+        </div>
+      </div>
+      <div class="right_bottm">
+        <div class="title1">
+          <span style="margin-left: 13px; font-weight: bold; font-size: 15px">今日预警</span>
+        </div>
+        <div style="width: 100%; height: 70%; margin-top: 10px">
+          <el-empty v-if="config3.data.length == 0" :image-size="100" description="暂无数据"></el-empty>
+          <dv-scroll-board v-else :config="config3" @click="row3" style="" />
+        </div>
+      </div>
+    </div>
 
-				<div class="right_top">
-					<div class="title1">
-						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日警情</span>
-						<img src="" alt="" />
-					</div>
-					<div style="width:100%;display:flex;justify-content: center;align-items: center;margin-top:15px;">
-						<div>
-							<span style="margin-right:5px;font-size: 13px;">报警次数</span>
-							<span class="fp">{{getNthChar(drzs.countAlarm+'',2)}}</span>
-							<span class="fp">{{getNthChar(drzs.countAlarm+'',1)}}</span>
-							<span class="fp">{{getNthChar(drzs.countAlarm+'',0)}}</span>
-						</div>
-						<div style="margin-left:30px;">
-							<span style="margin-right:5px;font-size: 13px;">警情数量</span>
-							<span class="fp">{{getNthChar(drzs.countCase+'',1)}}</span>
-							<span class="fp">{{getNthChar(drzs.countCase+'',0)}}</span>
-						</div>
-					</div>
-					<div id="EcharRef2" style="width:98%; height:73%;margin-top:10px;">
+    <el-dialog title="运营单位" v-model="dialogVisible1" width="800">
+      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
+        <el-button
+          ><el-icon> <Printer /> </el-icon>导出</el-button
+        >
+      </div>
+      <el-descriptions title="" border direction="" :column="2">
+        <el-descriptions-item label="平台名称">{{ showrow1data.name }}</el-descriptions-item>
+        <el-descriptions-item label="公司">{{ showrow1data.company }}</el-descriptions-item>
+        <el-descriptions-item label="城市">{{ showrow1data.city }}</el-descriptions-item>
+        <el-descriptions-item label="区县">{{ showrow1data.district }}</el-descriptions-item>
+        <el-descriptions-item label="IP">{{ showrow1data.ip }}</el-descriptions-item>
+        <el-descriptions-item label="平台公钥">{{ showrow1data.platKey }}</el-descriptions-item>
+        <el-descriptions-item label="视频系统">{{ showrow1data.ipcSystem }}</el-descriptions-item>
+        <el-descriptions-item label="在线状态">{{ showrow1data.lineState }}</el-descriptions-item>
+        <el-descriptions-item label="启用状态">{{ showrow1data.useState }}</el-descriptions-item>
+        <el-descriptions-item label="联系人">{{ showrow1data.userName1 }}</el-descriptions-item>
+        <el-descriptions-item label="电话">{{ showrow1data.userPhone2 }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
 
-					</div>
-				</div>
-				<div class="right_cen">
-					<div class="title1">
-						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日报警</span>
-					</div>
-					<div style="width:100%;height:80%;margin-top: 10px;">
-						<el-empty v-if="config2.data.length==0" :image-size="100" description="暂无数据"></el-empty>
-						<dv-scroll-board v-else :config="config2" @click="row2" style="" />
-					</div>
-				</div>
-				<div class="right_bottm">
-					<div class="title1">
-						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日预警</span>
-					</div>
-					<div style="width:100%;height:70%;margin-top: 10px;">
-						<el-empty v-if="config3.data.length==0" :image-size="100" description="暂无数据"></el-empty>
-						<dv-scroll-board v-else :config="config3" @click="row3" style="" />
-					</div>
-				</div>
-		</div>
+    <el-dialog title="今日报警" v-model="dialogVisible2" width="800">
+      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
+        <el-button
+          ><el-icon> <Printer /> </el-icon>导出</el-button
+        >
+      </div>
+      <el-descriptions title="" border direction="" :column="2">
+        <el-descriptions-item label="时间">{{ showrow2data.timestamp }}</el-descriptions-item>
+        <el-descriptions-item label="类型">{{ showrow2data.alarmCode }}</el-descriptions-item>
+        <el-descriptions-item label="报警单位">{{ showrow2data.alarmTarget }}</el-descriptions-item>
+        <el-descriptions-item label="地点">{{ showrow2data.address }}</el-descriptions-item>
+        <el-descriptions-item label="城市">{{ showrow2data.city }}</el-descriptions-item>
+        <el-descriptions-item label="区县">{{ showrow2data.district }}</el-descriptions-item>
+        <el-descriptions-item label="乡镇">{{ showrow2data.town }}</el-descriptions-item>
+        <el-descriptions-item label="报警类型">{{ showrow2data.alarmType }}</el-descriptions-item>
+        <el-descriptions-item label="设备类型">{{ showrow2data.deviceType }}</el-descriptions-item>
+        <el-descriptions-item label="设备号">{{ showrow2data.alarmSource }}</el-descriptions-item>
+        <el-descriptions-item label="描述信息">{{ showrow2data.description }}</el-descriptions-item>
+        <el-descriptions-item label="核验状态">{{ totypecn(showrow2data.fakeState) }}</el-descriptions-item>
+        <el-descriptions-item label="联系人">{{ showrow2data.user1Name }}</el-descriptions-item>
+        <el-descriptions-item label="联系人号码">{{ showrow2data.user1Phone }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
 
-		<el-dialog title="运营单位" v-model="dialogVisible1" width="800" :before-close="handleClose">
-			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
-				<el-button><el-icon>
-						<Printer />
-					</el-icon>导出</el-button>
-			</div>
-			<el-descriptions title="" border direction="" :column="2">
-				<el-descriptions-item label="平台名称">{{showrow1data.name}}</el-descriptions-item>
-				<el-descriptions-item label="公司">{{showrow1data.company}}</el-descriptions-item>
-				<el-descriptions-item label="城市">{{showrow1data.city}}</el-descriptions-item>
-				<el-descriptions-item label="区县">{{showrow1data.district}}</el-descriptions-item>
-				<el-descriptions-item label="IP">{{showrow1data.ip}}</el-descriptions-item>
-				<el-descriptions-item label="平台公钥">{{showrow1data.platKey}}</el-descriptions-item>
-				<el-descriptions-item label="视频系统">{{showrow1data.ipcSystem}}</el-descriptions-item>
-				<el-descriptions-item label="在线状态">{{showrow1data.lineState}}</el-descriptions-item>
-				<el-descriptions-item label="启用状态">{{showrow1data.useState}}</el-descriptions-item>
-				<el-descriptions-item label="联系人">{{showrow1data.userName1}}</el-descriptions-item>
-				<el-descriptions-item label="电话">{{showrow1data.userPhone2}}</el-descriptions-item>
-			</el-descriptions>
-		</el-dialog>
-
-		<el-dialog title="今日报警" v-model="dialogVisible2" width="800" :before-close="handleClose">
-			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
-				<el-button><el-icon>
-						<Printer />
-					</el-icon>导出</el-button>
-			</div>
-			<el-descriptions title="" border direction="" :column="2">
-				<el-descriptions-item label="时间">{{showrow2data.timestamp}}</el-descriptions-item>
-				<el-descriptions-item label="类型">{{showrow2data.alarmCode}}</el-descriptions-item>
-				<el-descriptions-item label="报警单位">{{showrow2data.alarmTarget}}</el-descriptions-item>
-				<el-descriptions-item label="地点">{{showrow2data.address}}</el-descriptions-item>
-				<el-descriptions-item label="城市">{{showrow2data.city}}</el-descriptions-item>
-				<el-descriptions-item label="区县">{{showrow2data.district}}</el-descriptions-item>
-				<el-descriptions-item label="乡镇">{{showrow2data.town}}</el-descriptions-item>
-				<el-descriptions-item label="报警类型">{{showrow2data.alarmType}}</el-descriptions-item>
-				<el-descriptions-item label="设备类型">{{showrow2data.deviceType}}</el-descriptions-item>
-				<el-descriptions-item label="设备号">{{showrow2data.alarmSource}}</el-descriptions-item>
-				<el-descriptions-item label="描述信息">{{showrow2data.description}}</el-descriptions-item>
-				<el-descriptions-item label="核验状态">{{totypecn(showrow2data.fakeState) }}</el-descriptions-item>
-				<el-descriptions-item label="联系人">{{showrow2data.user1Name}}</el-descriptions-item>
-				<el-descriptions-item label="联系人号码">{{showrow2data.user1Phone}}</el-descriptions-item>
-			</el-descriptions>
-		</el-dialog>
-
-		<el-dialog title="今日预警" v-model="dialogVisible3" width="800" :before-close="handleClose">
-			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
-				<el-button><el-icon>
-						<Printer />
-					</el-icon>导出</el-button>
-			</div>
-			<el-descriptions title="" border direction="" :column="2">
-				<el-descriptions-item label="时间">{{showrow3data.timestamp}}</el-descriptions-item>
-				<el-descriptions-item label="类型">{{showrow3data.alarmCode}}</el-descriptions-item>
-				<el-descriptions-item label="报警单位">{{showrow3data.alarmTarget}}</el-descriptions-item>
-				<el-descriptions-item label="地点">{{showrow3data.address}}</el-descriptions-item>
-				<el-descriptions-item label="城市">{{showrow3data.city}}</el-descriptions-item>
-				<el-descriptions-item label="区县">{{showrow3data.district}}</el-descriptions-item>
-				<el-descriptions-item label="乡镇">{{showrow3data.town}}</el-descriptions-item>
-				<el-descriptions-item label="报警类型">{{showrow3data.alarmType}}</el-descriptions-item>
-				<el-descriptions-item label="设备类型">{{showrow3data.deviceType}}</el-descriptions-item>
-				<el-descriptions-item label="设备号">{{showrow3data.alarmSource}}</el-descriptions-item>
-				<el-descriptions-item label="描述信息">{{showrow3data.description}}</el-descriptions-item>
-				<el-descriptions-item label="核验状态">{{totypecn(showrow3data.fakeState) }}</el-descriptions-item>
-				<el-descriptions-item label="联系人">{{showrow3data.user1Name}}</el-descriptions-item>
-				<el-descriptions-item label="联系人号码">{{showrow3data.user1Phone}}</el-descriptions-item>
-			</el-descriptions>
-		</el-dialog>
-	</div>
+    <el-dialog title="今日预警" v-model="dialogVisible3" width="800">
+      <div class="uploadBtn" style="text-align: right; margin-right: 10px">
+        <el-button
+          ><el-icon> <Printer /> </el-icon>导出</el-button
+        >
+      </div>
+      <el-descriptions title="" border direction="" :column="2">
+        <el-descriptions-item label="时间">{{ showrow3data.timestamp }}</el-descriptions-item>
+        <el-descriptions-item label="类型">{{ showrow3data.alarmCode }}</el-descriptions-item>
+        <el-descriptions-item label="报警单位">{{ showrow3data.alarmTarget }}</el-descriptions-item>
+        <el-descriptions-item label="地点">{{ showrow3data.address }}</el-descriptions-item>
+        <el-descriptions-item label="城市">{{ showrow3data.city }}</el-descriptions-item>
+        <el-descriptions-item label="区县">{{ showrow3data.district }}</el-descriptions-item>
+        <el-descriptions-item label="乡镇">{{ showrow3data.town }}</el-descriptions-item>
+        <el-descriptions-item label="报警类型">{{ showrow3data.alarmType }}</el-descriptions-item>
+        <el-descriptions-item label="设备类型">{{ showrow3data.deviceType }}</el-descriptions-item>
+        <el-descriptions-item label="设备号">{{ showrow3data.alarmSource }}</el-descriptions-item>
+        <el-descriptions-item label="描述信息">{{ showrow3data.description }}</el-descriptions-item>
+        <el-descriptions-item label="核验状态">{{ totypecn(showrow3data.fakeState) }}</el-descriptions-item>
+        <el-descriptions-item label="联系人">{{ showrow3data.user1Name }}</el-descriptions-item>
+        <el-descriptions-item label="联系人号码">{{ showrow3data.user1Phone }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
-	import 'echarts-gl';
-	import { getAreaCode } from './js/area';
-	import { Ref, ref, watch, onMounted, deleted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue';
-	import * as echarts from "echarts";
-	import api from "@/axios";
-	const { proxy } = getCurrentInstance() as any;
-	const day = proxy.day;
-	onMounted(
-		() => {
-			// gettotal();
-			seach();
-			initMapdt(localStorage.getItem('mapdata'), JSON.parse(localStorage.getItem('totaldata')),JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']);
-			get1(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
-			get3(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
-			getaiyuji(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
-			getdayline(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
-			getAi(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
-		}
-	);
-	//详情
-	const row1data = ref();
-	const showrow1data = ref();
-	const dialogVisible1 = ref(false);
-	const row1 = (row) => {
-		showrow1data.value = row1data.value[row.rowIndex]
-		dialogVisible1.value = true;
-	};
-	const totypecn = (data) => {
-		if (data == '0') {
-			return '未核验'
-		} else if (data == '1') {
-			return '核验为假'
-		} else if (data == '2') {
-			return '核验为真'
-		}
-	};
-	//查询运营商
-	const config = reactive({
-		header: ['名称', 'ip', '地区', '状态'],
-		headerHeight: 28,
-		columnWidth: [150, 150, 180, 80],
-		waitTime: 3000,
-		data: [
+import 'echarts-gl'
+// @ts-ignore
+import { getAreaCode } from './js/area'
+import { JsonResult } from '@/axios'
+import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import api from '@/axios'
+const { proxy } = getCurrentInstance() as any
+const day = proxy.day
+onMounted(() => {
+  // gettotal();
+  seach({})
+  initMapdt(localStorage.getItem('mapdata'), JSON.parse(localStorage.getItem('totaldata')), JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'])
+  get1(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
+  get3(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
+  getaiyuji(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
+  getdayline(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
+  getAi(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '')
+})
+//详情
+const row1data = ref()
+const showrow1data = ref()
+const dialogVisible1 = ref(false)
+const row1 = (row: any) => {
+  showrow1data.value = row1data.value[row.rowIndex]
+  dialogVisible1.value = true
+}
+const totypecn = (data: any) => {
+  if (data == '0') {
+    return '未核验'
+  } else if (data == '1') {
+    return '核验为假'
+  } else if (data == '2') {
+    return '核验为真'
+  }
+}
+//查询运营商
+const config = reactive({
+  header: ['名称', 'ip', '地区', '状态'],
+  headerHeight: 28,
+  columnWidth: [150, 150, 180, 80],
+  waitTime: 3000,
+  data: [],
+  headerBGC: '#174F8A',
+  oddRowBGC: '#2C5784',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  align: ['left', 'left', 'left', 'center'],
+})
 
-		],
-		headerBGC: '#174F8A',
-		oddRowBGC: '#2C5784',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		align: ['left', 'left', 'left', 'center'],
-	});
+const i = ref(0)
+const seach = (obj: any) => {
+  api.post('/multialarm/client/platform/getlist', obj).then((res: JsonResult<any>) => {
+    if (res.code == 0) {
+      row1data.value = res.data
+      let arr: any[] = []
+      res.data.forEach((x: any) => {
+        if (x.lineState == 'online') {
+          i.value++
+          arr.push([x.name, x.ip, x.address, '<span style="background:#038E4C;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'])
+        } else {
+          arr.push([x.name, x.ip, x.address, '<span style="background:red;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'])
+        }
+      })
+      config.data = arr
+    }
+  })
+}
+//还原
+const hy = () => {
+  var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
+  // maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
+  if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
+    return
+  } else {
+    let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0]
+    let ado = echarts.init(document.getElementById('myMap'))
+    ado.showLoading({
+      text: '地图加载中',
+      color: '#09A2DC', //设置加载颜色
+      textColor: '#09A2DC',
+      maskColor: 'rgba(255, 255, 255, 0.2)',
+      zlevel: 0,
+    })
+    // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
+    const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
+    fetch(url)
+      .then((response) => {
+        var status = response['status']
+        if (status == 500) {
+          return new Promise((resovle) => {
+            resovle('无数据')
+          })
+        } else {
+          return response.text()
+        }
+      })
+      .then((data) => {
+        api
+          .post('multialarm/system/alarm/total', {
+            name: localStorage.getItem('loginname'),
+            parent: fhcode,
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              const myChart = echarts.init(document.getElementById('myMap'))
+              myChart.dispose()
+              initMapdt(data, res.data, tree4data.find((element) => element.code == fhcode)['title'])
+              // ado.hideLoading()
+            }
+          })
+      })
+  }
+}
 
-	const i = ref(0)
-	const seach = (obj) => {
-		api.post('/multialarm/client/platform/getlist', obj).then((res) => {
-			if (res.code == 0) {
-				row1data.value = res.data;
-				let arr = [];
-				res.data.forEach((x) => {
-					if (x.lineState == "online") {
-						i.value++;
-						arr.push([x.name, x.ip, x.address, '<span style="background:#038E4C;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'])
-					} else {
-						arr.push([x.name, x.ip, x.address, '<span style="background:red;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'])
-					}
-				})
-				config.data = arr;
-			}
+//详情
+const row3data = ref()
+const showrow3data = ref()
+const dialogVisible3 = ref(false)
+const row3 = (row: any) => {
+  showrow3data.value = row3data.value[row.rowIndex]
+  dialogVisible3.value = true
+}
+//查询当日预警
+const config3 = reactive({
+  header: ['时间', '事件', '位置'],
+  waitTime: 3000,
+  rowNum: 6,
+  columnWidth: [220, 150, 200],
+  headerHeight: 38,
+  data: [],
+  headerBGC: '#174F8A',
+  oddRowBGC: '#2C5784',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  align: ['left', 'center', 'center', 'center'],
+})
+const getAi = (city: any, district: any, town: any) => {
+  api
+    .post('/multialarm/ai/alarm/getlist/today', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city,
+      district: district,
+      town: town,
+    })
+    .then((res: JsonResult<any>) => {
+      if (res.code == 0) {
+        row3data.value = res.data
+        let arr: any[] = []
+        res.data.forEach((x: any) => {
+          arr.push([x.timestamp, x.alarmName, x.address])
+        })
+        // res.data.forEach((x)={
+        // })
+        config3.data = arr
+      } else {
+      }
+    })
+}
+//2.3.5查询近7天报警数量
+const drzs = ref<Data1Type>({})
+const getdayline = (city: any, district: any, town: any) => {
+  api
+    .post('multialarm/system/alarm/count/dayline', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city,
+      district: district,
+      town: town,
+      start: day().format('YYYY-MM-DD HH:mm:ss'),
+      before: 1,
+    })
+    .then((res: JsonResult<any>) => {
+      if (res.code == 0) {
+        drzs.value = res.data[6]
+        initMap2(res.data)
+      } else {
+      }
+    })
+}
+//详情
+const dialogVisible2 = ref(false)
+const row2data = ref()
+const showrow2data = ref()
+const row2 = (row: any) => {
+  showrow2data.value = row2data.value[row.rowIndex]
+  dialogVisible2.value = true
+}
+//查询指定区域的当天所有警报事件列表
+const config2 = reactive({
+  header: ['时间', '类型', '报警单位', '地点'],
+  waitTime: 3000,
+  rowNum: 6,
+  columnWidth: [180, 100, 130, 180],
+  headerHeight: 38,
+  data: [],
+  headerBGC: '#174F8A',
+  oddRowBGC: '#2C5784',
+  evenRowBGC: 'F3FDFF',
+  index: false,
+  align: ['left', 'left', 'left', 'left'],
+})
+const getaiyuji = (city: any, district: any, town: any) => {
+  api
+    .post('multialarm/client/sensor/alarm_event/getlist/today', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? '' : city,
+      district: district,
+      town: town,
+    })
+    .then((res: JsonResult<any>) => {
+      if (res.code == 0) {
+        row2data.value = res.data
+        let arr: any[] = []
+        res.data.forEach((x: any) => {
+          arr.push([x.timestamp, x.alarmCode, x.station, x.address])
+        })
+        config2.data = arr
+      } else {
+      }
+    })
+}
+//01
+const getNthChar = (str: any, n: any) => {
+  let str1 = str.split('').reverse().join('')
+  return str1.charAt(n) || '0'
+}
+interface Data1Type {
+  [key: string]: any
+}
 
-		})
-	};
-	//还原
-	const hy = () => {
-		var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
-		// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
-		if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
-			return
-		} else {
-			let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0];
-			let ado = echarts.init(document.getElementById('myMap'));
-			ado.showLoading({
-				text: '地图加载中',
-				color: '#09A2DC',	//设置加载颜色
-				textColor: '#09A2DC',
-				maskColor: 'rgba(255, 255, 255, 0.2)',
-				zlevel: 0
-			})
-			// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
-			const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
-			fetch(url).then(response => {
-				var status = response["status"]
-				if (status == "500") {
-					return new Promise((resovle) => {
-						resovle("无数据");
-					})
-				} else {
-					return response.text();
-				}
-			}).then(data => {
-				api.post('multialarm/system/alarm/total', {
-					name: localStorage.getItem('loginname'),
-					parent: fhcode,
-				}).then((res) => {
-					if (res.code == 0) {
-						const myChart = echarts.init(document.getElementById('myMap'));
-						myChart.dispose();
-						initMapdt(data, res.data,tree4data.find(element => element.code == fhcode)['title'])
-						// ado.hideLoading()
-					}
+const data1 = ref<Data1Type>({})
+const get1 = (city: any, district: any, town: any) => {
+  api
+    .post('multialarm/system/count/devices', {
+      name: localStorage.getItem('loginname'),
+      city: city,
+      district: district,
+      town: town,
+    })
+    .then((res) => {
+      if (res.code == 0) {
+        data1.value = res.data
+        initMap(res.data)
+      } else {
+      }
+    })
+}
+const config1 = ref({})
+const get3 = (city: any, district: any, town: any) => {
+  api
+    .post('/multialarm/system/station/summary', {
+      name: localStorage.getItem('loginname'),
+      city: city,
+      district: district,
+      town: town,
+    })
+    .then((res: JsonResult<any>) => {
+      if (res.code == 0) {
+        initMap1(res.data)
+        config1.value = {
+          header: ['行业名称', '总数', '在线总数', '在线率'],
+          waitTime: 3000,
+          rowNum: 2,
+          columnWidth: [150, 120, 180, 120],
+          headerHeight: 28,
+          data: [
+            ['党政机关', res.data[0]['total'], res.data[0]['lineOnTotal'], res.data[0]['lineOnTotal'] == 0 ? '0%' : (res.data[0]['lineOnTotal'] / res.data[0]['total']) * 100 + '%'],
+            ['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
+            ['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
+            ['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
+            ['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
+          ],
+          headerBGC: '#174F8A',
+          oddRowBGC: '#2C5784',
+          evenRowBGC: 'F3FDFF',
+          index: false,
+          align: ['left', 'left', 'left', 'left'],
+        }
+        // initMap(res.data);
+      } else {
+      }
+    })
+}
+// const convertData = (data) => {
+//   var res = []
+//   for (var i = 0; i < data.length; i++) {
+//     var dataItem = data[i]
+//     var fromCoord = chinaGeoCoordMap[dataItem[0].name]
+//     var toCoord = [116.4551, 40.2539]
+//     if (fromCoord && toCoord) {
+//       res.push([
+//         {
+//           coord: fromCoord,
+//           value: dataItem[0].value,
+//         },
+//         {
+//           coord: toCoord,
+//         },
+//       ])
+//     }
+//   }
+//   return res
+// }
+var mapJson = ''
+const flattenTree = (treeData: any) => {
+  const result: any[] = []
+  function traverse(node: any) {
+    if (node.children && node.children.length > 0) {
+      for (const child of node.children) {
+        traverse(child)
+      }
+    }
+    delete node.children
+    result.push(node)
+  }
 
-				})
-			});
-		}
+  traverse(treeData)
+  return result
+}
+const maptitle = ref('')
+const initMapdt = (data: any, podat: any, nameb: any) => {
+  var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
+  // maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
+  maptitle.value = nameb
+  localStorage.setItem('nowCode', JSON.parse(data)['name'])
+  const myChart = echarts.init(document.getElementById('myMap'))
+  // myChart.showLoading();
+  // myChart.hideLoading();
+  let langarr = JSON.parse(data)['features']
+  langarr.forEach((x: any, i: number) => {})
 
-	};
+  echarts.registerMap('myMap', data)
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
+      backgroundColor: '#092b6a',
+      formatter: (params: any) => {
+        let datat = podat
+        let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
+        if (itemWithId2 == null || itemWithId2 == undefined) {
+          return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
+        } else {
+          return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
+        }
+      },
+    },
+    series: [
+      {
+        type: 'map3D',
+        name: '地图',
+        selectedMode: 'single', // 地图高亮单选
+        regionHeight: 1, // 地图高度
+        map: 'myMap',
+        viewControl: {
+          distance: 168, // 地图视角 控制初始大小
+          alpha: 180, // 倾斜角度
+          rotateSensitivity: 0,
+        },
+        label: {
+          show: true, // 是否显示名字
+          color: '#fff', // 文字颜色
+          fontSize: 15, // 文字大小
+          fontWeight: 'bold', // 文字大小
+        },
+        itemStyle: {
+          color: '#0A3E77', // 地图背景颜色
+          borderWidth: 1, // 分界线wdith
+          borderColor: '#a4d8f0', // 分界线颜色
+          opacity: 0.9,
+        },
+        emphasis: {
+          label: {
+            show: true, // 是否显示高亮
+            textStyle: {
+              color: '#fff', // 高亮文字颜色
+            },
+          },
+          itemStyle: {
+            color: '#3a69c1', // 地图高亮颜色
+            borderWidth: 10, // 分界线wdith
+            borderColor: '#6BECF5', // 分界线颜色
+          },
+        },
 
-	//详情
-	const row3data = ref();
-	const showrow3data = ref();
-	const dialogVisible3 = ref(false);
-	const row3 = (row) => {
-		showrow3data.value = row3data.value[row.rowIndex]
-		dialogVisible3.value = true;
-	};
-	//查询当日预警
-	const config3 = reactive({
-		header: ['时间', '事件', '位置'],
-		waitTime: 3000,
-		rowNum: 6,
-		columnWidth: [220, 150, 200],
-		headerHeight: 38,
-		data: [
-		],
-		headerBGC: '#174F8A',
-		oddRowBGC: '#2C5784',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		align: ['left', 'center', 'center', 'center'],
-	});
-	const getAi = (city, district, town) => {
-		api.post('/multialarm/ai/alarm/getlist/today', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-			district: district,
-			town: town,
-		}).then((res) => {
-			if (res.code == 0) {
-				row3data.value = res.data;
-				let arr = [];
-				res.data.forEach((x) => {
-					arr.push([x.timestamp, x.alarmName, x.address])
-				})
-				// res.data.forEach((x)={
-				// })
-				config3.data = arr;
-			} else {
-			}
-		})
-	};
-	//2.3.5查询近7天报警数量
-	const drzs = ref({});
-	const getdayline = (city, district, town) => {
-		api.post('multialarm/system/alarm/count/dayline', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-			district: district,
-			town: town,
-			start: day().format('YYYY-MM-DD HH:mm:ss'),
-			before: 1,
-		}).then((res) => {
-			if (res.code == 0) {
-				drzs.value = res.data[6];
-				initMap2(res.data);
-			} else {
-			}
-		})
-	};
-	//详情
-	const dialogVisible2 = ref(false);
-	const row2data = ref();
-	const showrow2data = ref();
-	const row2 = (row) => {
-		showrow2data.value = row2data.value[row.rowIndex]
-		dialogVisible2.value = true;
-	};
-	//查询指定区域的当天所有警报事件列表
-	const config2 = reactive({
-		header: ['时间', '类型', '报警单位', '地点'],
-		waitTime: 3000,
-		rowNum: 6,
-		columnWidth: [180, 100, 130, 180],
-		headerHeight: 38,
-		data: [
+        light: {
+          main: {
+            color: '#fff',
+            intensity: 1,
+            shadow: true,
+            shadowQuality: 'high',
+            alpha: 25, //
+            beta: 20,
+          },
+          ambient: {
+            color: '#fff',
+            intensity: 0.6,
+          },
+        },
+        lines3D: {
+          show: true,
+          data: [
+            {
+              coords: [
+                [111.51, 29.02], // 起点坐标
+                [109.22793, 29.12239], // 终点坐标
+              ],
+              lineStyle: {
+                width: 2,
+                color: '#fff',
+              },
+            },
+            // 可以添加更多的线条
+          ],
+        },
+      },
+    ],
+  }
 
-		],
-		headerBGC: '#174F8A',
-		oddRowBGC: '#2C5784',
-		evenRowBGC: 'F3FDFF',
-		index: false,
-		align: ['left', 'left', 'left', 'left'],
-	});
-	const getaiyuji = (city, district, town) => {
-		api.post('multialarm/client/sensor/alarm_event/getlist/today', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? '' : city,
-			district: district,
-			town: town,
-		}).then((res) => {
-			if (res.code == 0) {
-				row2data.value = res.data;
-				let arr = [];
-				res.data.forEach((x) => {
-					arr.push([x.timestamp, x.alarmCode, x.station, x.address])
-				})
-				config2.data = arr;
-			} else {
-			}
-		})
-	};
-	//01
-	const getNthChar = (str, n) => {
-		let str1 = str.split("").reverse().join("")
-		return str1.charAt(n) || '0';
-	};
-	const data1 = ref({});
-	const get1 = (city, district, town) => {
-		api.post('multialarm/system/count/devices', {
-			name: localStorage.getItem('loginname'),
-			city: city,
-			district: district,
-			town: town,
-		}).then((res) => {
-			if (res.code == 0) {
-				data1.value = res.data;
-				initMap(res.data);
-			} else {
-			}
-		})
-	};
-	const config1 = ref({});
-	const get3 = (city, district, town) => {
-		api.post('/multialarm/system/station/summary', {
-			name: localStorage.getItem('loginname'),
-			city: city,
-			district: district,
-			town: town,
-		}).then((res) => {
-			if (res.code == 0) {
-				initMap1(res.data)
-				config1.value = {
-					header: ['行业名称', '总数', '在线总数', '在线率'],
-					waitTime: 3000,
-					rowNum: 2,
-					columnWidth: [150, 120, 180, 120],
-					headerHeight: 28,
-					data: [
-						['党政机关', res.data[0]['total'], res.data[0]['lineOnTotal'], res.data[0]['lineOnTotal'] == 0 ? '0%' : (res.data[0]['lineOnTotal'] / res.data[0]['total']) * 100 + '%'],
-						['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
-						['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
-						['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
-						['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
-					],
-					headerBGC: '#174F8A',
-					oddRowBGC: '#2C5784',
-					evenRowBGC: 'F3FDFF',
-					index: false,
-					align: ['left', 'left', 'left', 'left'],
-				}
-				// initMap(res.data);
-			} else {
-			}
-		})
-	};
-	const convertData = (data) => {
-		var res = [];
-		for (var i = 0; i < data.length; i++) {
-			var dataItem = data[i];
-			var fromCoord = chinaGeoCoordMap[dataItem[0].name];
-			var toCoord = [116.4551, 40.2539];
-			if (fromCoord && toCoord) {
-				res.push([{
-					coord: fromCoord,
-					value: dataItem[0].value
-				}, {
-					coord: toCoord,
-				}]);
-			}
-		}
-		return res;
-	};
-	var mapJson = '';
-	const flattenTree = (treeData) => {
-		const result = [];
-		function traverse(node) {
-			if (node.children && node.children.length > 0) {
-				for (const child of node.children) {
-					traverse(child);
-				}
-			}
-			delete node.children
-			result.push(node);
-		}
+  myChart.setOption(option)
 
-		traverse(treeData);
-		return result;
-	};
-	const maptitle = ref('');
-	const initMapdt = (data, podat,nameb) => {
-		var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
-		// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
-		maptitle.value = nameb;
-		localStorage.setItem('nowCode', JSON.parse(data)['name'])
-		const myChart = echarts.init(document.getElementById('myMap'));
-		// myChart.showLoading();
-		// myChart.hideLoading();
-		let langarr = JSON.parse(data)['features'];
-		langarr.forEach((x, i) => {
-		})
+  window.addEventListener('resize', function () {
+    myChart.resize()
+  })
+  myChart.on('click', (x) => {
+    // let tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
+    tree4data.forEach((item) => {
+      if (item.stationId === undefined) {
+        if (item.code.length < 9) {
+          if (x.name == item.title) {
+            myChart.dispose()
+            let ado = echarts.init(document.getElementById('myMap'))
+            ado.showLoading({
+              text: '地图加载中',
+              color: '#09A2DC', //设置加载颜色
+              textColor: '#09A2DC',
+              maskColor: 'rgba(255, 255, 255, 0.2)',
+              zlevel: 0,
+            })
+            get1(x.name, '', '')
+            get3(x.name, '', '')
+            getaiyuji(x.name, '', '')
+            getdayline(x.name, '', '')
+            getAi(x.name, '', '')
+            //item.code
+            // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
+            const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
+            fetch(url)
+              .then((response) => {
+                var status = response['status']
+                if (status == 500) {
+                  return new Promise((resovle) => {
+                    resovle('无数据')
+                  })
+                } else {
+                  return response.text()
+                }
+              })
+              .then((data) => {
+                api
+                  .post('multialarm/system/alarm/total', {
+                    name: localStorage.getItem('loginname'),
+                    parent: item.code,
+                  })
+                  .then((res) => {
+                    if (res.code == 0) {
+                      initMapdt(data, res.data, x.name)
+                      ado.hideLoading()
+                    }
+                  })
+              })
+          }
+        }
+      }
+    })
+  })
+}
 
-		echarts.registerMap('myMap', data);
-		var option = {
-			tooltip: {
-				trigger: 'item',
-				textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
-				backgroundColor: '#092b6a',
-				formatter: (params) => {
-					let datat = podat;
-					let itemWithId2 = datat.children.find(item => item.grope === params.name);
-					if (itemWithId2 == null || itemWithId2 == undefined) {
-						return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
-					} else {
-						return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
-					}
-				}
+const initMap = (data1: any) => {
+  const domMap = document.getElementById('EcharRef')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '15px',
+      left: '230px',
+      orient: 'vertical',
+      type: 'scroll',
+      itemHeight: 5,
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['45%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'right',
+        },
 
-			},
-			series: [
-				{
-					type: 'map3D',
-					name: '地图',
-					selectedMode: 'single', // 地图高亮单选
-					regionHeight: 1, // 地图高度
-					map: 'myMap',
-					viewControl: {
-						distance: 168, // 地图视角 控制初始大小
-						alpha: 180,// 倾斜角度
-						rotateSensitivity: 0,
-					},
-					label: {
-						show: true, // 是否显示名字
-						color: '#fff', // 文字颜色
-						fontSize: 15, // 文字大小
-						fontWeight: 'bold', // 文字大小
-					},
-					itemStyle: {
-						color: '#0A3E77', // 地图背景颜色
-						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
-						}
-					},
-					lines3D: {
-						show: true,
-						data: [
-							{
-								coords: [
-									[111.51, 29.02],    // 起点坐标
-									[109.22793, 29.12239]     // 终点坐标
-								],
-								lineStyle: {
-									width: 2,
-									color: '#fff'
-								}
-							}
-							// 可以添加更多的线条
-						]
-					}
-				},
-
-			]
-		};
-
-
-		myChart.setOption(option);
-
-		window.addEventListener('resize', function () {
-			myChart.resize();
-		});
-		myChart.on('click', (x) => {
-			// let tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
-			tree4data.forEach((item) => {
-				if (item.stationId === undefined) {
-					if (item.code.length < 9) {
-						if (x.name == item.title) {
-							myChart.dispose();
-							let ado = echarts.init(document.getElementById('myMap'));
-							ado.showLoading({
-								text: '地图加载中',
-								color: '#09A2DC',	//设置加载颜色
-								textColor: '#09A2DC',
-								maskColor: 'rgba(255, 255, 255, 0.2)',
-								zlevel: 0
-							})
-							get1(x.name, '', '');
-							get3(x.name, '', '');
-							getaiyuji(x.name, '', '');
-							getdayline(x.name, '', '');
-							getAi(x.name, '', '');
-							//item.code
-							// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
-							const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
-							fetch(url).then(response => {
-								var status = response["status"]
-								if (status == "500") {
-									return new Promise((resovle) => {
-										resovle("无数据");
-									})
-								} else {
-									return response.text();
-								}
-							}).then(data => {
-								api.post('multialarm/system/alarm/total', {
-									name: localStorage.getItem('loginname'),
-									parent: item.code,
-								}).then((res) => {
-									if (res.code == 0) {
-										initMapdt(data, res.data,x.name)
-										ado.hideLoading();
-									}
-
-								})
-							});
-						}
-					}
-				}
-
-			})
-		})
-	};
-
-	const initMap = (data1) => {
-		const domMap = document.getElementById("EcharRef");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			legend: {
-				top: '15px',
-				left: '230px',
-				orient: 'vertical',
-				type: 'scroll',
-				itemHeight: 5,
-				textStyle: {
-					color: '#fff'
-				}
-			},
-			series: [
-				{
-					type: 'pie',
-					radius: ['45%', '70%'],
-					avoidLabelOverlap: false,
-					label: {
-						show: false,
-						position: 'right'
-					},
-
-					emphasis: {
-						label: {
-							show: true,
-							fontSize: 12,
-							fontWeight: 'bold',
-							color: '#fff'
-						}
-					},
-					labelLine: {
-						show: true,
-					},
-					center: ['35%', '50%'],
-					data: [
-						{ value: data1.alarmPointZone, name: '防区报警' },
-						{ value: data1.alarmPointTalk, name: '对讲报警' },
-						{ value: data1.mdevTotal, name: '移动报警' },
-						{ value: data1.alarmPointPushButton, name: '一键报警' },
-						{ value: data1.ipcTotal, name: '报警复合' }
-					]
-				}
-			]
-		};
-		// 使用刚指定的配置项和数据显示图表。
-		myChart.setOption(option);
-	};
-	const initMap1 = (data1) => {
-		const domMap = document.getElementById("EcharRef1");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			xAxis: {
-				type: 'category',
-				splitLine: {
-					show: false //去掉网格线
-				},
-				axisLine: {//这是y轴文字颜色
-					lineStyle: {
-						color: "#fff",
-					},
-				},
-				data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
-				axisLabel: {
-					formatter: val => {
-						let txt = val
-						if (val.length > 4) {
-							txt = val.substr(0, 4) + '...'
-						}
-						return txt
-					}
-				}
-			},
-			grid: {
-				top: '8%',
-				left: '1%',
-				right: '1%',
-				bottom: '3%',
-				containLabel: true
-			},
-			yAxis: {
-				type: 'value',
-				axisLine: {//这是y轴文字颜色
-					lineStyle: {
-						color: "#fff",
-					},
-				},
-				splitLine: { // 设置x轴轴线相关配置
-					show: false // 不显示x轴轴线
-				},
-			},
-			series: [
-				{
-					barWidth: '24%',
-					data: [data1[0]['total'], data1[2]['total'], data1[3]['total'], data1[1]['total'], data1[4]['total']],
-					type: 'bar',
-					itemStyle: {
-						normal: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-								offset: 0,
-								color: '#0386F6' // 起始颜色（红）
-							}, {
-								offset: 1,
-								color: '#0FBBC4' // 结束颜色（蓝）
-							}])
-						}
-					}
-				}
-			]
-		};
-		myChart.setOption(option);
-	};
-	const initMap2 = (arr) => {
-		let time = [];
-		let data1 = [];
-		let data2 = [];
-		arr.forEach(x => {
-			time.push(x.month + '-' + x.day);
-			data1.push(parseInt(x.countAlarm))
-			data2.push(parseInt(x.countCase))
-		})
-		const domMap = document.getElementById("EcharRef2");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'item',
-				formatter: (params) => {
-					return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
-				}
-			},
-			grid: {
-				top: '15%',
-				left: '1%',
-				right: '1%',
-				bottom: '3%',
-				containLabel: true
-			},
-			legend: {
-				data: [{
-					name: '报警次数',
-					textStyle: {
-						color: '#fff'
-					},
-
-				}, {
-					name: '警情数量',
-					textStyle: {
-						color: '#fff'
-					},
-
-				}]
-			},
-			xAxis: [
-				{
-					type: 'category',
-					splitLine: {
-						show: false //去掉网格线
-					},
-					data: time,
-					axisLine: {//这是y轴文字颜色
-						lineStyle: {
-							color: "#fff",
-						},
-					},
-					axisPointer: {
-						type: 'shadow'
-					}
-				}
-			],
-			yAxis: [
-				{
-					type: 'value',
-					name: '',
-					min: 0,
-					// max: 250,
-					interval: 50,
-					splitLine: { // 设置x轴轴线相关配置
-						show: false // 不显示x轴轴线
-					},
-					axisLine: {//这是y轴文字颜色
-						lineStyle: {
-							color: "#fff",
-						},
-					},
-					axisLabel: {
-						formatter: '{value}次'
-					}
-				},
-				{
-					type: 'value',
-					min: 0,
-					splitLine: { // 设置x轴轴线相关配置
-						show: false // 不显示x轴轴线
-					},
-					max: 25,
-					interval: 5,
-					axisLabel: {
-						formatter: ''
-					}
-				}
-			],
-			series: [
-				{
-					name: '报警次数',
-					type: 'bar',
-					tooltip: {
-						valueFormatter: function (value) {
-							// return value + ' ml';
-						}
-					},
-					barWidth: '24%',
-					itemStyle: {
-						color: '#3F7AD1' // 设置折线的颜色为红色
-					},
-					data: data1,
-				},
-				{
-					name: '警情数量',
-					type: 'line',
-					smooth: true,
-					yAxisIndex: 1,
-					tooltip: {
-						valueFormatter: function (value) {
-							// return value + '°C';
-						}
-					},
-					itemStyle: {
-						color: '#81A2CF' // 设置折线的颜色为红色
-					},
-					data: data2,
-				}
-			]
-		};
-		myChart.setOption(option);
-	};
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 12,
+            fontWeight: 'bold',
+            color: '#fff',
+          },
+        },
+        labelLine: {
+          show: true,
+        },
+        center: ['35%', '50%'],
+        data: [
+          { value: data1.alarmPointZone, name: '防区报警' },
+          { value: data1.alarmPointTalk, name: '对讲报警' },
+          { value: data1.mdevTotal, name: '移动报警' },
+          { value: data1.alarmPointPushButton, name: '一键报警' },
+          { value: data1.ipcTotal, name: '报警复合' },
+        ],
+      },
+    ],
+  }
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+const initMap1 = (data1: any) => {
+  const domMap = document.getElementById('EcharRef1')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'item',
+    },
+    xAxis: {
+      type: 'category',
+      splitLine: {
+        show: false, //去掉网格线
+      },
+      axisLine: {
+        //这是y轴文字颜色
+        lineStyle: {
+          color: '#fff',
+        },
+      },
+      data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
+      axisLabel: {
+        formatter: (val: any) => {
+          let txt = val
+          if (val.length > 4) {
+            txt = val.substr(0, 4) + '...'
+          }
+          return txt
+        },
+      },
+    },
+    grid: {
+      top: '8%',
+      left: '1%',
+      right: '1%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        //这是y轴文字颜色
+        lineStyle: {
+          color: '#fff',
+        },
+      },
+      splitLine: {
+        // 设置x轴轴线相关配置
+        show: false, // 不显示x轴轴线
+      },
+    },
+    series: [
+      {
+        barWidth: '24%',
+        data: [data1[0]['total'], data1[2]['total'], data1[3]['total'], data1[1]['total'], data1[4]['total']],
+        type: 'bar',
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0386F6', // 起始颜色（红）
+              },
+              {
+                offset: 1,
+                color: '#0FBBC4', // 结束颜色（蓝）
+              },
+            ]),
+          },
+        },
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+const initMap2 = (arr: any) => {
+  let time: any[] = []
+  let data1: any[] = []
+  let data2: any[] = []
+  arr.forEach((x: any) => {
+    time.push(x.month + '-' + x.day)
+    data1.push(parseInt(x.countAlarm))
+    data2.push(parseInt(x.countCase))
+  })
+  const domMap = document.getElementById('EcharRef2')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
+      },
+    },
+    grid: {
+      top: '15%',
+      left: '1%',
+      right: '1%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    legend: {
+      data: [
+        {
+          name: '报警次数',
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        {
+          name: '警情数量',
+          textStyle: {
+            color: '#fff',
+          },
+        },
+      ],
+    },
+    xAxis: [
+      {
+        type: 'category',
+        splitLine: {
+          show: false, //去掉网格线
+        },
+        data: time,
+        axisLine: {
+          //这是y轴文字颜色
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '',
+        min: 0,
+        // max: 250,
+        interval: 50,
+        splitLine: {
+          // 设置x轴轴线相关配置
+          show: false, // 不显示x轴轴线
+        },
+        axisLine: {
+          //这是y轴文字颜色
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+        axisLabel: {
+          formatter: '{value}次',
+        },
+      },
+      {
+        type: 'value',
+        min: 0,
+        splitLine: {
+          // 设置x轴轴线相关配置
+          show: false, // 不显示x轴轴线
+        },
+        max: 25,
+        interval: 5,
+        axisLabel: {
+          formatter: '',
+        },
+      },
+    ],
+    series: [
+      {
+        name: '报警次数',
+        type: 'bar',
+        tooltip: {
+          valueFormatter: function (value: any) {
+            // return value + ' ml';
+          },
+        },
+        barWidth: '24%',
+        itemStyle: {
+          color: '#3F7AD1', // 设置折线的颜色为红色
+        },
+        data: data1,
+      },
+      {
+        name: '警情数量',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 1,
+        tooltip: {
+          valueFormatter: function (value: any) {
+            // return value + '°C';
+          },
+        },
+        itemStyle: {
+          color: '#81A2CF', // 设置折线的颜色为红色
+        },
+        data: data2,
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
 </script>
 
 <style scoped lang="scss">
-	:deep(.dv-scroll-board .header) {
-		font-size: 13px;
-	}
+:deep(.dv-scroll-board .header) {
+ font-size: 13px;
+}
 
-	:deep(.dv-scroll-board .rows .row-item) {
-		font-size: 12px;
-	}
+:deep(.dv-scroll-board .rows .row-item) {
+ font-size: 12px;
+}
 
-	:deep(.el-descriptions) {
-		width: 98%;
-		margin: 10px auto;
-		text-align: center;
-		border: 1px solid #1F9BD9;
+:deep(.el-descriptions) {
+ width: 98%;
+ margin: 10px auto;
+ text-align: center;
+ border: 1px solid #1F9BD9;
 
-		--el-descriptions-table-border: {
-			1px solid #1F9BD9
-		}
+ --el-descriptions-table-border: {
+  1px solid #1F9BD9
+ }
 
-		;
+ ;
 
-		--el-descriptions-item-bordered-label-background: {
-			transparent
-		}
+ --el-descriptions-item-bordered-label-background: {
+  transparent
+ }
 
-		;
-	}
+ ;
+}
 
-	:deep(.el-descriptions__body) {
-		background: transparent;
-	}
+:deep(.el-descriptions__body) {
+ background: transparent;
+}
 
-	:deep(.el-descriptions__label) {
-		width: 130px;
-		color: rgb(12, 214, 254);
-		background: transparent;
-	}
+:deep(.el-descriptions__label) {
+ width: 130px;
+ color: rgb(12, 214, 254);
+ background: transparent;
+}
 
-	:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
-		color: #fff;
-	}
+:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
+ color: #fff;
+}
 
-	:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
-		border: 1px solid #1F9BD9;
-	}
+:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
+ border: 1px solid #1F9BD9;
+}
 
-	:deep(.el-dialog__body) {
-		padding: 10px;
-		color: #fff;
-	}
+:deep(.el-dialog__body) {
+ padding: 10px;
+ color: #fff;
+}
 
-	.uploadBtn .el-button {
-		background-color: transparent;
-		border-color: #1F9BD9;
-		color: #1F9BD9;
-	}
+.uploadBtn .el-button {
+ background-color: transparent;
+ border-color: #1F9BD9;
+ color: #1F9BD9;
+}
 
-	.uploadBtn .el-button i {
-		font-size: 16px;
-		margin-right: 3px;
-	}
+.uploadBtn .el-button i {
+ font-size: 16px;
+ margin-right: 3px;
+}
 
-	.uploadBtn .el-button:hover {
-		color: rgb(12, 214, 254);
-		border: 1px solid rgb(12, 214, 254);
-	}
+.uploadBtn .el-button:hover {
+ color: rgb(12, 214, 254);
+ border: 1px solid rgb(12, 214, 254);
+}
 
-	:deep(.el-dialog) {
-		--el-dialog-bg-color: #071D4D;
-		border: 3px solid #387dbf;
-	}
+:deep(.el-dialog) {
+ --el-dialog-bg-color: #071D4D;
+ border: 3px solid #387dbf;
+}
 
-	:deep(.el-dialog__header) {
-		padding: 13px;
-		border-bottom: 1px solid #3374b4 !important;
-		margin-right: 0px;
-	}
+:deep(.el-dialog__header) {
+ padding: 13px;
+ border-bottom: 1px solid #3374b4 !important;
+ margin-right: 0px;
+}
 
-	:deep(.el-dialog__title) {
-		color: #067bc1 !important;
-		font-weight: 500;
-	}
+:deep(.el-dialog__title) {
+ color: #067bc1 !important;
+ font-weight: 500;
+}
 
-	:deep(.el-input__inner) {
-		color: #000;
-	}
+:deep(.el-input__inner) {
+ color: #000;
+}
 
-	:deep(.el-dialog__headerbtn .el-dialog__close) {
-		color: #fff;
-		font-weight: 500;
-		font-size: 18px;
-	}
+:deep(.el-dialog__headerbtn .el-dialog__close) {
+ color: #fff;
+ font-weight: 500;
+ font-size: 18px;
+}
 
-	.tabs_a {
-		background-image: url(./indeximag/able.jpg);
-		background-size: 100% 100%;
-	}
+.tabs_a {
+ background-image: url(./indeximag/able.jpg);
+ background-size: 100% 100%;
+}
 
-	:deep(.el-tabs__nav-wrap) {
-		margin-bottom: 1px;
-	}
+:deep(.el-tabs__nav-wrap) {
+ margin-bottom: 1px;
+}
 
-	:deep(.el-tabs--border-card>.el-tabs__content) {
-		height: calc(100% - 40px);
-		background: red;
-		padding: 0px;
-	}
+:deep(.el-tabs--border-card>.el-tabs__content) {
+ height: calc(100% - 40px);
+ background: red;
+ padding: 0px;
+}
 
-	:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
-		color: #d1dbe5;
-		background-color: #29d;
-		border-right-color: #29d;
-		border-left-color: #29d;
-	}
+:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
+ color: #d1dbe5;
+ background-color: #29d;
+ border-right-color: #29d;
+ border-left-color: #29d;
+}
 
-	:deep(.el-tabs--border-card>.el-tabs__header) {
-		background-color: transparent;
-		border-bottom: none;
-	}
+:deep(.el-tabs--border-card>.el-tabs__header) {
+ background-color: transparent;
+ border-bottom: none;
+}
 
-	:deep(.el-tabs--border-card) {
-		background: #022C54;
-		border: none;
-	}
+:deep(.el-tabs--border-card) {
+ background: #022C54;
+ border: none;
+}
 
-	:deep(.el-progress-bar__outer) {
-		background-color: #174771;
-	}
+:deep(.el-progress-bar__outer) {
+ background-color: #174771;
+}
 
-	:deep(.el-progress-bar__inner) {
-		background-color: #3BC5F3;
-	}
+:deep(.el-progress-bar__inner) {
+ background-color: #3BC5F3;
+}
 
-	.title1 {
-		width: 100%;
-		height: 30px;
-		background-image: url(./indeximag/一级标题.png);
-		background-size: 100% 100%;
-		line-height: 30px;
-	}
+.title1 {
+ width: 100%;
+ height: 30px;
+ background-image: url(./indeximag/一级标题.png);
+ background-size: 100% 100%;
+ line-height: 30px;
+}
 
-	.fp {
-		background-image: url(./indeximag/数字背景.png);
-		width: 15px;
-		height: 22px;
-		display: inline-block;
-		background-size: 100% 100%;
-		line-height: 22px;
-		text-align: center;
-		margin-right: 10px;
-		font-size: 13px;
-		font-weight: 500;
-	}
+.fp {
+ background-image: url(./indeximag/数字背景.png);
+ width: 15px;
+ height: 22px;
+ display: inline-block;
+ background-size: 100% 100%;
+ line-height: 22px;
+ text-align: center;
+ margin-right: 10px;
+ font-size: 13px;
+ font-weight: 500;
+}
 
-	.box {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		background-color: #022C54;
+.box {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ background-color: #022C54;
 
-		.left {
-			width: 450px;
-			height: 98%;
-			margin-top: 0.5%;
-			margin-left: 0.5%;
-			border: 1px solid #3876B9;
+ .left {
+  width: 450px;
+  height: 98%;
+  margin-top: 0.5%;
+  margin-left: 0.5%;
+  border: 1px solid #3876B9;
 
-			.left_top {
-				width: 97%;
-				height: 33%;
-				padding: 5px;
-			}
+  .left_top {
+	  width: 97%;
+	  height: 33%;
+	  padding: 5px;
+  }
 
-			.left_cen {
-				width: 97%;
-				height: 33%;
-				padding: 5px;
-			}
+  .left_cen {
+	  width: 97%;
+	  height: 33%;
+	  padding: 5px;
+  }
 
-			.left_bottm {
-				width: 97%;
-				height: 33%;
-				padding: 5px;
-			}
-		}
+  .left_bottm {
+	  width: 97%;
+	  height: 33%;
+	  padding: 5px;
+  }
+ }
 
-		.right {
-			width: 450px;
-			height: 98%;
-			margin-top: 0.5%;
-			border: 1px solid #3876B9;
-			margin-right: 5px;
+ .right {
+  width: 450px;
+  height: 98%;
+  margin-top: 0.5%;
+  border: 1px solid #3876B9;
+  margin-right: 5px;
 
-			.right_top {
-				width: 97%;
-				height: 33%;
-				padding: 5px;
-			}
+  .right_top {
+	  width: 97%;
+	  height: 33%;
+	  padding: 5px;
+  }
 
-			.right_cen {
-				width: 97%;
-				height: 33%;
-				padding: 5px;
-			}
+  .right_cen {
+	  width: 97%;
+	  height: 33%;
+	  padding: 5px;
+  }
 
-			.right_bottm {
-				width: 97%;
-				height: 35%;
-				padding: 5px;
-			}
-		}
+  .right_bottm {
+	  width: 97%;
+	  height: 35%;
+	  padding: 5px;
+  }
+ }
 
-		.cen {
-			width: calc(100% - 900px);
-			height: 98%;
-			margin-top: 0.5%;
-			margin-left: 0.5%;
-			margin-right: 0.5%;
-			border: 1px solid #3876B9;
-			background-image: url(./indeximag/able.jpg);
-			background-size: 100% 100%;
-		}
-	}
-</style>
\ No newline at end of file
+ .cen {
+  width: calc(100% - 900px);
+  height: 98%;
+  margin-top: 0.5%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+  border: 1px solid #3876B9;
+  background-image: url(./indeximag/able.jpg);
+  background-size: 100% 100%;
+ }
+}
+</style>