From 916ed8fc0460a32211e6617f198e7e4314800240 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 25 Dec 2024 15:11:34 +0800
Subject: [PATCH] Update analysis.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统计分析页面代码ts修复
---
 src/views/page/analysis.vue | 1680 +++++++++++++++++------------------
 1 file changed, 812 insertions(+), 868 deletions(-)

diff --git a/src/views/page/analysis.vue b/src/views/page/analysis.vue
index 876ca1f8..f431ba05 100644
--- a/src/views/page/analysis.vue
+++ b/src/views/page/analysis.vue
@@ -1,900 +1,844 @@
 <template>
-	<div class="cont">
-		<el-tabs v-model="activeName1" class="demo-tabs">
-			<el-tab-pane label="统计分析" name="first" style="display: flex;width:100%;height:100%;background:#F2F3F5;">
-				<div class="left">
-					<div style="width:100%;">
-						<div style="width:100%;display: flex;">
-							<div
-								style="flex: 1;background:#fff;display:flex;justify-content: center;align-items: center;font-size:14px;">
-								<div style="text-align: center;">
-									<p style="color: #929292;margin-bottom:20px;">区域总数</p>
-									<span
-										style="color: #343434;font-size:28px !important;font-weight:600;">{{alldata.cityCount}}</span><span
-										style="color: #929292;">个</span>
-								</div>
-								<div style="margin-left:20px;">
-									<p>
-										<img style="width:30px;height:30px;vertical-align: middle;"
-											src="./analyimg/jd.png" alt="" />
-										<span style="color: #929292;margin-left:10px;">街道数量</span>
-										<span
-											style="color: #343434;margin-left:10px;font-weight:600;">{{alldata.townCount}}</span>
-									</p>
-									<p style="margin-top: 20px;">
-										<img style="width:30px;height:30px;vertical-align: middle;"
-											src="./analyimg/dw.png" alt="" />
-										<span
-											style="color: #929292;margin-left:10px;vertical-align: middle;">单位数量</span>
-										<span
-											style="color: #343434;margin-left:10px;font-weight: 600;">{{alldata.stationCount}}</span>
-									</p>
-								</div>
-								<div>
-									<p>
-										<!-- <img style="width:30px;height:30px;vertical-align: middle;"
+  <div class="cont">
+    <el-tabs v-model="activeName1" class="demo-tabs">
+      <el-tab-pane label="统计分析" name="first" style="display: flex; width: 100%; height: 100%; background: #f2f3f5">
+        <div class="left">
+          <div style="width: 100%">
+            <div style="width: 100%; display: flex">
+              <div style="flex: 1; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px">
+                <div style="text-align: center">
+                  <p style="color: #929292; margin-bottom: 20px">区域总数</p>
+                  <span style="color: #343434; font-size: 28px !important; font-weight: 600">{{ alldata.cityCount }}</span
+                  ><span style="color: #929292">个</span>
+                </div>
+                <div style="margin-left: 20px">
+                  <p>
+                    <img style="width: 30px; height: 30px; vertical-align: middle" src="./analyimg/jd.png" alt="" />
+                    <span style="color: #929292; margin-left: 10px">街道数量</span>
+                    <span style="color: #343434; margin-left: 10px; font-weight: 600">{{ alldata.townCount }}</span>
+                  </p>
+                  <p style="margin-top: 20px">
+                    <img style="width: 30px; height: 30px; vertical-align: middle" src="./analyimg/dw.png" alt="" />
+                    <span style="color: #929292; margin-left: 10px; vertical-align: middle">单位数量</span>
+                    <span style="color: #343434; margin-left: 10px; font-weight: 600">{{ alldata.stationCount }}</span>
+                  </p>
+                </div>
+                <div>
+                  <p>
+                    <!-- <img style="width:30px;height:30px;vertical-align: middle;"
 											src="./analyimg/jd.png" alt="" /> -->
-										<span style="color: #929292;margin-left:10px;">点位总数</span>
-										<span
-											style="color: #343434;margin-left:10px;font-weight:600;">{{alldata.alarmPointTotal}}</span>
-									</p>
-									<p style="margin-top: 20px;">
-										<!-- <img style="width:30px;height:30px;vertical-align: middle;"
+                    <span style="color: #929292; margin-left: 10px">点位总数</span>
+                    <span style="color: #343434; margin-left: 10px; font-weight: 600">{{ alldata.alarmPointTotal }}</span>
+                  </p>
+                  <p style="margin-top: 20px">
+                    <!-- <img style="width:30px;height:30px;vertical-align: middle;"
 											src="./analyimg/dw.png" alt="" /> -->
-										<span
-											style="color: #929292;margin-left:10px;vertical-align: middle;">在线总数</span>
-										<span
-											style="color: #343434;margin-left:10px;font-weight: 600;">{{alldata.alarmPointOnline}}</span>
-									</p>
-								</div>
-							</div>
-							<div style="flex: 1;background:#fff;margin:0 8px;">
-								<div
-									style="border-bottom: 1px solid #f2f7fd;margin: 0 10px;padding:8px 0px;display: flex;justify-content: space-between;">
-									<span style="color: #333333;">报警点位</span>
-									<span style="color: #828282;">总数:<text
-											style="color: #333333;font-size:18px;">{{alldata.alarmPointPushButton}}</text></span>
-								</div>
-								<div style="display: flex;align-items: center;padding:15px 20px;">
-									<div style="width:80%;margin-top:-10px;">
-										<div>
-											<img style="vertical-align: middle;" src="./analyimg/zx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">在线数</span>
-											<span
-												style="color: #333333 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.alarmPointPushButtonOnline}}</span>
-										</div>
-										<div style="margin-top: 10px;">
-											<img style="vertical-align: middle;" src="./analyimg/lx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">离线数</span>
-											<span
-												style="color: #828282 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.alarmPointPushButton-alldata.alarmPointPushButtonOnline}}</span>
-										</div>
-									</div>
-									<div>
-										<el-progress style="" width="60" type="circle"
-											:percentage="alldata.alarmPointPushButtonOnline==0?0:(alldata.alarmPointPushButtonOnline/alldata.alarmPointPushButton)*100"></el-progress>
-									</div>
-								</div>
-							</div>
-							<div style="flex: 1;background:#fff;">
-								<div
-									style="border-bottom: 1px solid #f2f7fd;margin: 0 10px;padding:8px 0px;display: flex;justify-content: space-between;">
-									<span style="color: #333333;">对讲点位</span>
-									<span style="color: #828282;">总数:<text
-											style="color: #333333;font-size:18px;">{{alldata.platformTotal}}</text></span>
-								</div>
-								<div style="display: flex;align-items: center;padding:15px 20px;">
-									<div style="width:80%;margin-top:-10px;">
-										<div>
-											<img style="vertical-align: middle;" src="./analyimg/zx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">在线数</span>
-											<span
-												style="color: #333333 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.platformOnline}}</span>
-										</div>
-										<div style="margin-top: 10px;">
-											<img style="vertical-align: middle;" src="./analyimg/lx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">离线数</span>
-											<span
-												style="color: #828282 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.platformTotal-alldata.platformOnline}}</span>
-										</div>
-									</div>
-									<div>
-										<el-progress style="" width="60" type="circle"
-											:percentage="alldata.platformOnline==0?0:(alldata.platformOnline/alldata.platformTotal)*100"></el-progress>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div style="width:100%;height:50%;;display: flex;margin-top:8px;">
-							<div style="flex: 1;background:#fff;">
-								<div
-									style="border-bottom: 1px solid #f2f7fd;margin: 0 10px;padding:8px 0px;display: flex;justify-content: space-between;">
-									<span style="color: #333333;">安保数量</span>
-									<span style="color: #828282;">总数:<text
-											style="color: #333333;font-size:18px;">{{alldata.ipcTotal}}</text></span>
-								</div>
-								<div style="display: flex;align-items: center;padding:15px 20px;">
-									<div style="width:80%;margin-top:-10px;">
-										<div>
-											<img style="vertical-align: middle;" src="./analyimg/zx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">在线数</span>
-											<span
-												style="color: #333333 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.ipcOnline}}</span>
-										</div>
-										<div style="margin-top: 10px;">
-											<img style="vertical-align: middle;" src="./analyimg/lx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">离线数</span>
-											<span
-												style="color: #828282 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.ipcTotal-alldata.ipcOnline}}</span>
-										</div>
-									</div>
-									<div>
-										<el-progress style="" width="60" type="circle"
-											:percentage="alldata.ipcOnline==0?0:(alldata.ipcOnline/alldata.ipcTotal)*100"></el-progress>
-									</div>
-								</div>
-							</div>
-							<div style="flex: 1;background:#fff;margin:0 8px;">
-								<div
-									style="border-bottom: 1px solid #f2f7fd;margin: 0 10px;padding:8px 0px;display: flex;justify-content: space-between;">
-									<span style="color: #333333;">复核设备</span>
-									<span style="color: #828282;">总数:<text
-											style="color: #333333;font-size:18px;">{{alldata.mdevTotal}}</text></span>
-								</div>
-								<div style="display: flex;align-items: center;padding:15px 20px;">
-									<div style="width:80%;margin-top:-10px;">
-										<div>
-											<img style="vertical-align: middle;" src="./analyimg/zx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">在线数</span>
-											<span
-												style="color: #333333 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.mdevOnline}}</span>
-										</div>
-										<div style="margin-top: 10px;">
-											<img style="vertical-align: middle;" src="./analyimg/lx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">离线数</span>
-											<span
-												style="color: #828282 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.mdevTotal-alldata.mdevOnline}}</span>
-										</div>
-									</div>
-									<div>
-										<el-progress style="" width="60" type="circle"
-											:percentage="alldata.mdevOnline==0?0:(alldata.mdevOnline/alldata.mdevTotal)*100"></el-progress>
-									</div>
-								</div>
-							</div>
-							<div style="flex: 1;background:#fff;">
-								<div
-									style="border-bottom: 1px solid #f2f7fd;margin: 0 10px;padding:8px 0px;display: flex;justify-content: space-between;">
-									<span style="color: #333333;">AI设备</span>
-									<span style="color: #828282;">总数:<text
-											style="color: #333333;font-size:18px;">{{alldata.aiTotal}}</text></span>
-								</div>
-								<div style="display: flex;align-items: center;padding:15px 20px;">
-									<div style="width:80%;margin-top:-10px;">
-										<div>
-											<img style="vertical-align: middle;" src="./analyimg/zx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">在线数</span>
-											<span
-												style="color: #333333 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.aiOnline}}</span>
-										</div>
-										<div style="margin-top: 10px;">
-											<img style="vertical-align: middle;" src="./analyimg/lx.png" alt="" />
-											<span
-												style="color: #828282;margin-left:4px;vertical-align: bottom;">离线数</span>
-											<span
-												style="color: #828282 ;letter-spacing: 1px;margin-left:4px;vertical-align: bottom;">{{alldata.aiTotal-alldata.aiOnline}}</span>
-										</div>
-									</div>
-									<div>
-										<el-progress style="" width="60" type="circle"
-											:percentage="alldata.aiOnline==0?0:(alldata.aiOnline/alldata.aiTotal)*100"></el-progress>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div
-						style="height:calc((100% - 300px)/2);background:#fff;margin-bottom:8px;margin-top: 10px;padding:10px;">
-						<p style="color: #333333;font-weight: 600;">接入单位</p>
-						<div id="EcharRef1" style="width:100%;height:90%;">
-
-						</div>
-					</div>
-					<div style="width:100%;height:calc((100% - 300px)/2);display: flex;">
-						<div style="flex:1; background:#fff;padding:10px;">
-							<p style="color: #333333;font-weight: 600;">行业分类</p>
-							<div style="height:90%;margin-top:10px;overflow: auto;padding: 0 30px;" v-if="hangyedata">
-								<ul>
-									<li style="display: flex;justify-content: space-between;">
-										<span
-											style="display: inline-block;color: #828282;vertical-align: middle;">党政机关【{{hangyedata[0].total}}】</span>
-										<el-progress style="width:70%;display: inline-block;vertical-align:middle;"
-											color="#4880FF" :text-inside="true" :stroke-width="15"
-											:percentage="(hangyedata[0].lineOnTotal/hangyedata[0].total)*100"></el-progress>
-									</li>
-									<li style="margin-top:20px;display: flex;justify-content: space-between;">
-										<span
-											style="display: inline-block;color: #828282;vertical-align: middle;">金融机构【{{hangyedata[2].total}}】</span>
-										<el-progress style="width:70%;display: inline-block;vertical-align:middle;"
-											color="#4880FF" :text-inside="true" :stroke-width="15"
-											:percentage="(hangyedata[2].lineOnTotal/hangyedata[2].total)*100"></el-progress>
-									</li>
-									<li style="margin-top:20px;display: flex;justify-content: space-between;">
-										<span
-											style="display: inline-block;color: #828282;vertical-align: middle;">医疗机构【{{hangyedata[3].total}}】</span>
-										<el-progress style="width:70%;display: inline-block;vertical-align:middle;"
-											color="#4880FF" :text-inside="true" :stroke-width="15"
-											:percentage="(hangyedata[3].lineOnTotal/hangyedata[3].total)*100"></el-progress>
-									</li>
-									<li style="margin-top:20px;display: flex;justify-content: space-between;">
-										<span
-											style="display: inline-block;color: #828282;vertical-align: middle;">中小学【{{hangyedata[1].total}}】</span>
-										<el-progress style="width:70%;display: inline-block;vertical-align:middle;"
-											color="#4880FF" :text-inside="true" :stroke-width="15"
-											:percentage="(hangyedata[1].lineOnTotal/hangyedata[1].total)*100"></el-progress>
-									</li>
-									<li style="margin-top:20px;display: flex;justify-content: space-between;">
-										<span
-											style="display: inline-block;color: #828282;vertical-align: middle;">其他【{{hangyedata[4].total}}】</span>
-										<el-progress style="width:70%;display: inline-block;vertical-align:middle;"
-											color="#4880FF" :text-inside="true" :stroke-width="15"
-											:percentage="hangyedata[4].lineOnTotal===0?0:(hangyedata[4].lineOnTotal/hangyedata[4].total)*100"></el-progress>
-									</li>
-								</ul>
-							</div>
-						</div>
-						<div style="flex:1; background:#fff;margin-left:10px;padding:10px;overflow: auto;">
-							<p style="color: #333333;font-weight: 600;">资源占比</p>
-							<div style="width:100%;height:90%;display: flex;">
-								<div id="EcharRef2" style="width:50%;height:100%;">
-
-								</div>
-								<div style="width:50%;height: 100%;color:#333;display: flex;flex-wrap: wrap;">
-									<div
-										style="background: #F8F9FD;text-align: center;margin-right: 4px;margin-bottom: 4px;border-radius: 4px;width:73px;height:63px;padding-left:7px;">
-										<div style="color:#57585D;font-size: 18px;font-weight:600;margin-top: 10px;">
-											{{(alldata.alarmPointZone/(alldata.alarmPointZone+alldata.ipcTotal+alldata.stationCount+alldata.mdevTotal+alldata.aiTotal)*100).toFixed(2)+'%'}}
-										</div>
-										<div style="display: flex;align-items: center;margin-top:8px;">
-											<div style="width:10px;height:10px;background: #679AF6;"></div>
-											<span style="margin-left:7px;">防区点位</span>
-										</div>
-									</div>
-									<div
-										style="background: #F8F9FD;text-align: center;margin-right: 4px;margin-bottom: 4px;border-radius: 4px;width:73px;height:63px;padding-left:7px;">
-										<div style="color:#57585D;font-size: 18px;font-weight:600;margin-top: 10px;">
-											{{(alldata.ipcTotal/(alldata.alarmPointZone+alldata.ipcTotal+alldata.stationCount+alldata.mdevTotal+alldata.aiTotal)*100).toFixed(2)+'%'}}
-										</div>
-										<div style="display: flex;align-items: center;margin-top:8px;">
-											<div style="width:10px;height:10px;background: #ABBCE7;"></div>
-											<span style="margin-left:7px;">对讲点位</span>
-										</div>
-									</div>
-									<div
-										style="background: #F8F9FD;text-align: center;margin-right: 4px;margin-bottom: 4px;border-radius: 4px;width:73px;height:63px;padding-left:7px;">
-										<div style="color:#57585D;font-size: 18px;font-weight:600;margin-top: 10px;">
-											{{(alldata.stationCount/(alldata.alarmPointZone+alldata.ipcTotal+alldata.stationCount+alldata.mdevTotal+alldata.aiTotal)*100).toFixed(2)+'%'}}
-										</div>
-										<div style="display: flex;align-items: center;margin-top:8px;">
-											<div style="width:10px;height:10px;background: #E2E9FD;"></div>
-											<span style="margin-left:7px;">安保数量</span>
-										</div>
-									</div>
-									<div
-										style="background: #F8F9FD;text-align: center;margin-right: 4px;margin-bottom: 4px;border-radius: 4px;width:73px;height:63px;padding-left:7px;">
-										<div style="color:#57585D;font-size: 18px;font-weight:600;margin-top: 10px;">
-											{{(alldata.mdevTotal/(alldata.alarmPointZone+alldata.ipcTotal+alldata.stationCount+alldata.mdevTotal+alldata.aiTotal)*100).toFixed(2)+'%'}}
-										</div>
-										<div style="display: flex;align-items: center;margin-top:8px;">
-											<div style="width:10px;height:10px;background: #FEACAF;"></div>
-											<span style="margin-left:7px;">复核设备</span>
-										</div>
-									</div>
-									<div
-										style="background: #F8F9FD;text-align: center;margin-right: 4px;margin-bottom: 4px;border-radius: 4px;width:73px;height:63px;padding-left:7px;">
-										<div style="color:#57585D;font-size: 18px;font-weight:600;margin-top: 10px;">
-											{{(alldata.aiTotal/(alldata.alarmPointZone+alldata.ipcTotal+alldata.stationCount+alldata.mdevTotal+alldata.aiTotal)*100).toFixed(2)+'%'}}
-										</div>
-										<div style="display: flex;align-items: center;margin-top:8px;">
-											<div style="width:10px;height:10px;background: #FE5664;"></div>
-											<span style="margin-left:7px;">AI设备</span>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="right">
-					<p style="color: #333333;font-weight: 600;">
-						7日告警统计
-					</p>
-					<div id="EcharRef3" style="width:100%;height:23%;"></div>
-					<el-table :data="tableData" stripe style="width: 100%">
-						<el-table-column v-if="city=='湖南省'" prop="city" label="区域" align="center"> </el-table-column>
-						<el-table-column v-else prop="district" label="区域" align="center"> </el-table-column>
-						<el-table-column prop="countCase" label="警情" align="center"> </el-table-column>
-						<el-table-column prop="countAlarm" label="报警" align="center"> </el-table-column>
-						<el-table-column prop="countAI" label="AI预警" align="center"> </el-table-column>
-					</el-table>
-					<el-tabs v-model="activeName" style="height:calc(77% - 370px) ;">
-						<el-tab-pane label="报警类型" name="first" style="width:100%;height:80%;display: flex;">
-							<div id="EcharRef4" style="width:50%;height:70%;margin-top:30px;"></div>
-							<div style="">
-								<ul style="display: flex;margin-top:32px;width:250px;flex-wrap: wrap;">
-									<li style="display: flex;margin-left:20px;align-items: center;width:100px;height:50px;"
-										v-for="(item,index) in alarmcodetotaldata" :key="index">
-										<div class="foou" :style="{background:color[index]}">
-										</div>
-										<div>
-											<p style="color: #333333;">{{item.name}} </p>
-											<p style="color: #828282;margin-top: 3px;">
-												{{(item.value*100/allcount).toFixed(2)+'%'}}</p>
-										</div>
-									</li>
-								</ul>
-							</div>
-						</el-tab-pane>
-						<el-tab-pane label="警情类型" name="second">配置管理</el-tab-pane>
-						<el-tab-pane label="AI预警类型" name="third">角色管理</el-tab-pane>
-					</el-tabs>
-				</div>
-			</el-tab-pane>
-			<el-tab-pane label="考核管理" name="second" style="width:100%;height:100%;">
-				<el-tabs type="border-card" tab-position="left" style="width:100%;height:100%;padding-left:0px;">
-					<el-tab-pane label="管理考核">
-						<el-table :data="tablekaohe" style="width: 100%" border>
-							<el-table-column prop="city" label="城市" align="center"> </el-table-column>
-							<el-table-column prop="district" label="区县" align="center"> </el-table-column>
-							<el-table-column prop="alarmProcessTotal" label="报警总计" align="center"> </el-table-column>
-							<el-table-column prop="alarmTestTotal" label="报警测试总计" align="center"> </el-table-column>
-							<el-table-column prop="alarmTestTotal" label="报警测试总计" align="center"> </el-table-column>
-							<el-table-column prop="currentOnlineCount" label="当前在线数" align="center"> </el-table-column>
-							<el-table-column prop="loginDuration" label="登录时长(分钟)" align="center"> </el-table-column>
-							<el-table-column prop="loginTotal" label="登录总次数" align="center"> </el-table-column>
-							<el-table-column prop="noticeTotal" label="通知总计" align="center"> </el-table-column>
-							<el-table-column prop="taskTotal" label="任务总数" align="center"> </el-table-column>
-							<el-table-column prop="userTotal" label="用户总数" align="center"> </el-table-column>
-						</el-table>
-					</el-tab-pane>
-					<el-tab-pane label="接入考核">
-						<el-table :data="jierukaohe" style="width: 100%" border>
-							<el-table-column prop="city" label="城市" align="center"> </el-table-column>
-							<el-table-column prop="district" label="区县" align="center"> </el-table-column>
-							<el-table-column prop="alarmPointTotal" label="报警点位" align="center"> </el-table-column>
-							<el-table-column prop="platformTotal" label="对讲点位" align="center"> </el-table-column>
-							<el-table-column prop="ipcTotal" label="安保数量" align="center"> </el-table-column>
-							<el-table-column prop="mdevTotal" label="复核设备" align="center"> </el-table-column>
-							<el-table-column prop="aiTotal" label="AI设备" align="center"> </el-table-column>
-						</el-table>
-					</el-tab-pane>
-				</el-tabs>
-			</el-tab-pane>
-		</el-tabs>
-
-	</div>
+                    <span style="color: #929292; margin-left: 10px; vertical-align: middle">在线总数</span>
+                    <span style="color: #343434; margin-left: 10px; font-weight: 600">{{ alldata.alarmPointOnline }}</span>
+                  </p>
+                </div>
+              </div>
+              <div style="flex: 1; background: #fff; margin: 0 8px">
+                <div style="border-bottom: 1px solid #f2f7fd; margin: 0 10px; padding: 8px 0px; display: flex; justify-content: space-between">
+                  <span style="color: #333333">报警点位</span>
+                  <span style="color: #828282"
+                    >总数:<text style="color: #333333; font-size: 18px">{{ alldata.alarmPointPushButton }}</text></span
+                  >
+                </div>
+                <div style="display: flex; align-items: center; padding: 15px 20px">
+                  <div style="width: 80%; margin-top: -10px">
+                    <div>
+                      <img style="vertical-align: middle" src="./analyimg/zx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">在线数</span>
+                      <span style="color: #333333; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.alarmPointPushButtonOnline }}</span>
+                    </div>
+                    <div style="margin-top: 10px">
+                      <img style="vertical-align: middle" src="./analyimg/lx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">离线数</span>
+                      <span style="color: #828282; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.alarmPointPushButton - alldata.alarmPointPushButtonOnline }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <el-progress
+                      :width="60"
+                      type="circle"
+                      :percentage="alldata.alarmPointPushButtonOnline == 0 ? 0 : (alldata.alarmPointPushButtonOnline / alldata.alarmPointPushButton) * 100"
+                    ></el-progress>
+                  </div>
+                </div>
+              </div>
+              <div style="flex: 1; background: #fff">
+                <div style="border-bottom: 1px solid #f2f7fd; margin: 0 10px; padding: 8px 0px; display: flex; justify-content: space-between">
+                  <span style="color: #333333">对讲点位</span>
+                  <span style="color: #828282"
+                    >总数:<text style="color: #333333; font-size: 18px">{{ alldata.platformTotal }}</text></span
+                  >
+                </div>
+                <div style="display: flex; align-items: center; padding: 15px 20px">
+                  <div style="width: 80%; margin-top: -10px">
+                    <div>
+                      <img style="vertical-align: middle" src="./analyimg/zx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">在线数</span>
+                      <span style="color: #333333; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.platformOnline }}</span>
+                    </div>
+                    <div style="margin-top: 10px">
+                      <img style="vertical-align: middle" src="./analyimg/lx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">离线数</span>
+                      <span style="color: #828282; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.platformTotal - alldata.platformOnline }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <el-progress :width="60" type="circle" :percentage="alldata.platformOnline == 0 ? 0 : (alldata.platformOnline / alldata.platformTotal) * 100"></el-progress>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="width: 100%; height: 50%; display: flex; margin-top: 8px">
+              <div style="flex: 1; background: #fff">
+                <div style="border-bottom: 1px solid #f2f7fd; margin: 0 10px; padding: 8px 0px; display: flex; justify-content: space-between">
+                  <span style="color: #333333">安保数量</span>
+                  <span style="color: #828282"
+                    >总数:<text style="color: #333333; font-size: 18px">{{ alldata.ipcTotal }}</text></span
+                  >
+                </div>
+                <div style="display: flex; align-items: center; padding: 15px 20px">
+                  <div style="width: 80%; margin-top: -10px">
+                    <div>
+                      <img style="vertical-align: middle" src="./analyimg/zx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">在线数</span>
+                      <span style="color: #333333; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.ipcOnline }}</span>
+                    </div>
+                    <div style="margin-top: 10px">
+                      <img style="vertical-align: middle" src="./analyimg/lx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">离线数</span>
+                      <span style="color: #828282; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.ipcTotal - alldata.ipcOnline }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <el-progress :width="60" type="circle" :percentage="alldata.ipcOnline == 0 ? 0 : (alldata.ipcOnline / alldata.ipcTotal) * 100"></el-progress>
+                  </div>
+                </div>
+              </div>
+              <div style="flex: 1; background: #fff; margin: 0 8px">
+                <div style="border-bottom: 1px solid #f2f7fd; margin: 0 10px; padding: 8px 0px; display: flex; justify-content: space-between">
+                  <span style="color: #333333">复核设备</span>
+                  <span style="color: #828282"
+                    >总数:<text style="color: #333333; font-size: 18px">{{ alldata.mdevTotal }}</text></span
+                  >
+                </div>
+                <div style="display: flex; align-items: center; padding: 15px 20px">
+                  <div style="width: 80%; margin-top: -10px">
+                    <div>
+                      <img style="vertical-align: middle" src="./analyimg/zx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">在线数</span>
+                      <span style="color: #333333; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.mdevOnline }}</span>
+                    </div>
+                    <div style="margin-top: 10px">
+                      <img style="vertical-align: middle" src="./analyimg/lx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">离线数</span>
+                      <span style="color: #828282; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.mdevTotal - alldata.mdevOnline }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <el-progress :width="60" type="circle" :percentage="alldata.mdevOnline == 0 ? 0 : (alldata.mdevOnline / alldata.mdevTotal) * 100"></el-progress>
+                  </div>
+                </div>
+              </div>
+              <div style="flex: 1; background: #fff">
+                <div style="border-bottom: 1px solid #f2f7fd; margin: 0 10px; padding: 8px 0px; display: flex; justify-content: space-between">
+                  <span style="color: #333333">AI设备</span>
+                  <span style="color: #828282"
+                    >总数:<text style="color: #333333; font-size: 18px">{{ alldata.aiTotal }}</text></span
+                  >
+                </div>
+                <div style="display: flex; align-items: center; padding: 15px 20px">
+                  <div style="width: 80%; margin-top: -10px">
+                    <div>
+                      <img style="vertical-align: middle" src="./analyimg/zx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">在线数</span>
+                      <span style="color: #333333; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.aiOnline }}</span>
+                    </div>
+                    <div style="margin-top: 10px">
+                      <img style="vertical-align: middle" src="./analyimg/lx.png" alt="" />
+                      <span style="color: #828282; margin-left: 4px; vertical-align: bottom">离线数</span>
+                      <span style="color: #828282; letter-spacing: 1px; margin-left: 4px; vertical-align: bottom">{{ alldata.aiTotal - alldata.aiOnline }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <el-progress :width="60" type="circle" :percentage="alldata.aiOnline == 0 ? 0 : (alldata.aiOnline / alldata.aiTotal) * 100"></el-progress>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="height: calc((100% - 300px) / 2); background: #fff; margin-bottom: 8px; margin-top: 10px; padding: 10px">
+            <p style="color: #333333; font-weight: 600">接入单位</p>
+            <div id="EcharRef1" style="width: 100%; height: 90%"></div>
+          </div>
+          <div style="width: 100%; height: calc((100% - 300px) / 2); display: flex">
+            <div style="flex: 1; background: #fff; padding: 10px">
+              <p style="color: #333333; font-weight: 600">行业分类</p>
+              <div style="height: 90%; margin-top: 10px; overflow: auto; padding: 0 30px" v-if="hangyedata">
+                <ul>
+                  <li style="display: flex; justify-content: space-between">
+                    <span style="display: inline-block; color: #828282; vertical-align: middle">党政机关【{{ hangyedata[0].total }}】</span>
+                    <el-progress
+                      style="width: 70%; display: inline-block; vertical-align: middle"
+                      color="#4880FF"
+                      :text-inside="true"
+                      :stroke-width="15"
+                      :percentage="(hangyedata[0].lineOnTotal / hangyedata[0].total) * 100"
+                    ></el-progress>
+                  </li>
+                  <li style="margin-top: 20px; display: flex; justify-content: space-between">
+                    <span style="display: inline-block; color: #828282; vertical-align: middle">金融机构【{{ hangyedata[2].total }}】</span>
+                    <el-progress
+                      style="width: 70%; display: inline-block; vertical-align: middle"
+                      color="#4880FF"
+                      :text-inside="true"
+                      :stroke-width="15"
+                      :percentage="(hangyedata[2].lineOnTotal / hangyedata[2].total) * 100"
+                    ></el-progress>
+                  </li>
+                  <li style="margin-top: 20px; display: flex; justify-content: space-between">
+                    <span style="display: inline-block; color: #828282; vertical-align: middle">医疗机构【{{ hangyedata[3].total }}】</span>
+                    <el-progress
+                      style="width: 70%; display: inline-block; vertical-align: middle"
+                      color="#4880FF"
+                      :text-inside="true"
+                      :stroke-width="15"
+                      :percentage="(hangyedata[3].lineOnTotal / hangyedata[3].total) * 100"
+                    ></el-progress>
+                  </li>
+                  <li style="margin-top: 20px; display: flex; justify-content: space-between">
+                    <span style="display: inline-block; color: #828282; vertical-align: middle">中小学【{{ hangyedata[1].total }}】</span>
+                    <el-progress
+                      style="width: 70%; display: inline-block; vertical-align: middle"
+                      color="#4880FF"
+                      :text-inside="true"
+                      :stroke-width="15"
+                      :percentage="(hangyedata[1].lineOnTotal / hangyedata[1].total) * 100"
+                    ></el-progress>
+                  </li>
+                  <li style="margin-top: 20px; display: flex; justify-content: space-between">
+                    <span style="display: inline-block; color: #828282; vertical-align: middle">其他【{{ hangyedata[4].total }}】</span>
+                    <el-progress
+                      style="width: 70%; display: inline-block; vertical-align: middle"
+                      color="#4880FF"
+                      :text-inside="true"
+                      :stroke-width="15"
+                      :percentage="hangyedata[4].lineOnTotal === 0 ? 0 : (hangyedata[4].lineOnTotal / hangyedata[4].total) * 100"
+                    ></el-progress>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div style="flex: 1; background: #fff; margin-left: 10px; padding: 10px; overflow: auto">
+              <p style="color: #333333; font-weight: 600">资源占比</p>
+              <div style="width: 100%; height: 90%; display: flex">
+                <div id="EcharRef2" style="width: 50%; height: 100%"></div>
+                <div style="width: 50%; height: 100%; color: #333; display: flex; flex-wrap: wrap">
+                  <div style="background: #f8f9fd; text-align: center; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; width: 73px; height: 63px; padding-left: 7px">
+                    <div style="color: #57585d; font-size: 18px; font-weight: 600; margin-top: 10px">
+                      {{ ((alldata.alarmPointZone / (alldata.alarmPointZone + alldata.ipcTotal + alldata.stationCount + alldata.mdevTotal + alldata.aiTotal)) * 100).toFixed(2) + '%' }}
+                    </div>
+                    <div style="display: flex; align-items: center; margin-top: 8px">
+                      <div style="width: 10px; height: 10px; background: #679af6"></div>
+                      <span style="margin-left: 7px">防区点位</span>
+                    </div>
+                  </div>
+                  <div style="background: #f8f9fd; text-align: center; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; width: 73px; height: 63px; padding-left: 7px">
+                    <div style="color: #57585d; font-size: 18px; font-weight: 600; margin-top: 10px">
+                      {{ ((alldata.ipcTotal / (alldata.alarmPointZone + alldata.ipcTotal + alldata.stationCount + alldata.mdevTotal + alldata.aiTotal)) * 100).toFixed(2) + '%' }}
+                    </div>
+                    <div style="display: flex; align-items: center; margin-top: 8px">
+                      <div style="width: 10px; height: 10px; background: #abbce7"></div>
+                      <span style="margin-left: 7px">对讲点位</span>
+                    </div>
+                  </div>
+                  <div style="background: #f8f9fd; text-align: center; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; width: 73px; height: 63px; padding-left: 7px">
+                    <div style="color: #57585d; font-size: 18px; font-weight: 600; margin-top: 10px">
+                      {{ ((alldata.stationCount / (alldata.alarmPointZone + alldata.ipcTotal + alldata.stationCount + alldata.mdevTotal + alldata.aiTotal)) * 100).toFixed(2) + '%' }}
+                    </div>
+                    <div style="display: flex; align-items: center; margin-top: 8px">
+                      <div style="width: 10px; height: 10px; background: #e2e9fd"></div>
+                      <span style="margin-left: 7px">安保数量</span>
+                    </div>
+                  </div>
+                  <div style="background: #f8f9fd; text-align: center; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; width: 73px; height: 63px; padding-left: 7px">
+                    <div style="color: #57585d; font-size: 18px; font-weight: 600; margin-top: 10px">
+                      {{ ((alldata.mdevTotal / (alldata.alarmPointZone + alldata.ipcTotal + alldata.stationCount + alldata.mdevTotal + alldata.aiTotal)) * 100).toFixed(2) + '%' }}
+                    </div>
+                    <div style="display: flex; align-items: center; margin-top: 8px">
+                      <div style="width: 10px; height: 10px; background: #feacaf"></div>
+                      <span style="margin-left: 7px">复核设备</span>
+                    </div>
+                  </div>
+                  <div style="background: #f8f9fd; text-align: center; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; width: 73px; height: 63px; padding-left: 7px">
+                    <div style="color: #57585d; font-size: 18px; font-weight: 600; margin-top: 10px">
+                      {{ ((alldata.aiTotal / (alldata.alarmPointZone + alldata.ipcTotal + alldata.stationCount + alldata.mdevTotal + alldata.aiTotal)) * 100).toFixed(2) + '%' }}
+                    </div>
+                    <div style="display: flex; align-items: center; margin-top: 8px">
+                      <div style="width: 10px; height: 10px; background: #fe5664"></div>
+                      <span style="margin-left: 7px">AI设备</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <p style="color: #333333; font-weight: 600">7日告警统计</p>
+          <div id="EcharRef3" style="width: 100%; height: 23%"></div>
+          <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column v-if="city == '湖南省'" prop="city" label="区域" align="center"> </el-table-column>
+            <el-table-column v-else prop="district" label="区域" align="center"> </el-table-column>
+            <el-table-column prop="countCase" label="警情" align="center"> </el-table-column>
+            <el-table-column prop="countAlarm" label="报警" align="center"> </el-table-column>
+            <el-table-column prop="countAI" label="AI预警" align="center"> </el-table-column>
+          </el-table>
+          <el-tabs v-model="activeName" style="height: calc(77% - 370px)">
+            <el-tab-pane label="报警类型" name="first" style="width: 100%; height: 80%; display: flex">
+              <div id="EcharRef4" style="width: 50%; height: 70%; margin-top: 30px"></div>
+              <div>
+                <ul style="display: flex; margin-top: 32px; width: 250px; flex-wrap: wrap">
+                  <li style="display: flex; margin-left: 20px; align-items: center; width: 100px; height: 50px" v-for="(item, index) in alarmcodetotaldata" :key="index">
+                    <div class="foou" :style="{background: color[index]}"></div>
+                    <div>
+                      <p style="color: #333333">{{ item.name }}</p>
+                      <p style="color: #828282; margin-top: 3px">
+                        {{ ((item.value * 100) / allcount).toFixed(2) + '%' }}
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="警情类型" name="second">配置管理</el-tab-pane>
+            <el-tab-pane label="AI预警类型" name="third">角色管理</el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="考核管理" name="second" style="width: 100%; height: 100%">
+        <el-tabs type="border-card" tab-position="left" style="width: 100%; height: 100%; padding-left: 0px">
+          <el-tab-pane label="管理考核">
+            <el-table :data="tablekaohe" style="width: 100%" border>
+              <el-table-column prop="city" label="城市" align="center"> </el-table-column>
+              <el-table-column prop="district" label="区县" align="center"> </el-table-column>
+              <el-table-column prop="alarmProcessTotal" label="报警总计" align="center"> </el-table-column>
+              <el-table-column prop="alarmTestTotal" label="报警测试总计" align="center"> </el-table-column>
+              <el-table-column prop="alarmTestTotal" label="报警测试总计" align="center"> </el-table-column>
+              <el-table-column prop="currentOnlineCount" label="当前在线数" align="center"> </el-table-column>
+              <el-table-column prop="loginDuration" label="登录时长(分钟)" align="center"> </el-table-column>
+              <el-table-column prop="loginTotal" label="登录总次数" align="center"> </el-table-column>
+              <el-table-column prop="noticeTotal" label="通知总计" align="center"> </el-table-column>
+              <el-table-column prop="taskTotal" label="任务总数" align="center"> </el-table-column>
+              <el-table-column prop="userTotal" label="用户总数" align="center"> </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="接入考核">
+            <el-table :data="jierukaohe" style="width: 100%" border>
+              <el-table-column prop="city" label="城市" align="center"> </el-table-column>
+              <el-table-column prop="district" label="区县" align="center"> </el-table-column>
+              <el-table-column prop="alarmPointTotal" label="报警点位" align="center"> </el-table-column>
+              <el-table-column prop="platformTotal" label="对讲点位" align="center"> </el-table-column>
+              <el-table-column prop="ipcTotal" label="安保数量" align="center"> </el-table-column>
+              <el-table-column prop="mdevTotal" label="复核设备" align="center"> </el-table-column>
+              <el-table-column prop="aiTotal" label="AI设备" align="center"> </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script lang="ts" setup>
-	import { Ref, ref, watch, onMounted, deleted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue';
-	import * as echarts from "echarts";
-	import api from "@/axios";
-	var city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'];
-	onMounted(
-		() => {
-			getalldata(); hangye(); getqidata(); gettkbr(); getsummary(); alarmcodetotal();
-		}
-	);
-	const toleiname = (str) => {
-		let name = '';
-		switch (str) {
-			case '00':
-				name = '摄像头'
-				break;
-			case '01':
-				name = '防区'
-				break;
-			case '02':
-				name = '对讲'
-				break;
-			case '03':
-				name = '一键报警'
-				break;
-			case '04':
-				name = '单兵'
-				break;
-			case '05':
-				name = 'AI'
-				break;
-			case '99':
-				name = '其他'
-				break;
-			default:
-				name = ''
-				break;
-		}
-		return name;
-	};
-	const alarmcodetotaldata = ref([]);
-	const allcount = ref(0);
-	const alarmcodetotal = () => {
-		api.post('/multialarm/system/alarmcode/total', {
-		}).then((res) => {
-			if (res.code == 0) {
-				console.log('分类', res.data)
-				let arr = [];
-				let cont = 0;
-				res.data.forEach((x) => {
-					// console.log('x',x)
-					cont += x.alarmCount
-					arr.push({
-						value: x.alarmCount, name: toleiname(x.alarmCode)
-					})
-				})
-				allcount.value = cont;
-				alarmcodetotaldata.value = arr;
-				// console.log('x',arr,cont)
-				initMap4(arr);
-			}
-		})
-	};
-	const color = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#3BA272'];
-	const initMap4 = (data) => {
-		const domMap = document.getElementById("EcharRef4");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			color: color,
-			series: [
-				{
-					name: '',
-					type: 'pie',
-					radius: ['100%', '70%'],
-					avoidLabelOverlap: false,
-					label: {
-						show: false,
-						position: 'center'
-					},
-					emphasis: {
-						label: {
-							show: true,
-							fontSize: 20,
-							fontWeight: 'bold'
-						}
-					},
-					labelLine: {
-						show: false,
-					},
-					data: data
-				}
-			]
-		};
-		myChart.setOption(option);
-	};
-	const activeName1 = ref('first');
-	//获取考核
-	const tablekaohe = ref([]);
-	const getsummary = () => {
-		api.post('multialarm/client/user/summary', {
-		}).then((res) => {
-			if (res.code == 0) {
-				tablekaohe.value = res.data;
-			}
-		})
-	};
-	const qidata = ref({});
-	const getqidata = () => {
-		api.post('multialarm/system/alarm/count/dayline', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-		}).then((res1) => {
-			initMap3(res1.data);
-		})
-	};
-	const tableData = ref([]);
-	const gettkbr = () => {
-		api.post('multialarm/system/alarm/count/org/days', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-		}).then((res1) => {
-			console.log('表格', res1)
-			tableData.value = res1.data
-		})
-	};
-	const alldata = ref({});
-	const jierukaohe = ref([]);
-	const getalldata = () => {
-		api.post('/multialarm/system/count/all', {
-			// name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-		}).then((res1) => {
-			console.log('res1', res1)
-			alldata.value = res1.data;
-			jierukaohe.value = res1.data.children;
-			initMap1(res1.data.children);
-			initMap2(res1.data);
-		})
-	};
-	//行业分类
-	const hangyedata = ref([{}, {}, {}, {}, {}])
-	const hangye = () => {
-		api.post('/multialarm/system/station/summary', {
-			name: localStorage.getItem('loginname'),
-			city: city == '湖南省' ? null : city,
-			district: '',
-			town: '',
-		}).then((res) => {
-			console.log('行业分类', res)
-			if (res.code == 0) {
-				hangyedata.value = res.data;
-			}
-		})
-	};
-	const activeName = ref('first');
+import {ref, onMounted} from 'vue'
+import * as echarts from 'echarts'
+import api from '@/axios'
+var city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
+onMounted(() => {
+  getalldata()
+  hangye()
+  getqidata()
+  gettkbr()
+  getsummary()
+  alarmcodetotal()
+})
+const toleiname = (str: any) => {
+  let name = ''
+  switch (str) {
+    case '00':
+      name = '摄像头'
+      break
+    case '01':
+      name = '防区'
+      break
+    case '02':
+      name = '对讲'
+      break
+    case '03':
+      name = '一键报警'
+      break
+    case '04':
+      name = '单兵'
+      break
+    case '05':
+      name = 'AI'
+      break
+    case '99':
+      name = '其他'
+      break
+    default:
+      name = ''
+      break
+  }
+  return name
+}
+const alarmcodetotaldata = ref([])
+const allcount = ref(0)
+const alarmcodetotal = () => {
+  api.post('/multialarm/system/alarmcode/total', {}).then((res: any) => {
+    if (res.code == 0) {
+      console.log('分类', res.data)
+      let arr: any[] = []
+      let cont = 0
+      res.data.forEach((x: any) => {
+        // console.log('x',x)
+        cont += x.alarmCount
+        arr.push({
+          value: x.alarmCount,
+          name: toleiname(x.alarmCode)
+        })
+      })
+      allcount.value = cont
+      alarmcodetotaldata.value = arr
+      // console.log('x',arr,cont)
+      initMap4(arr)
+    }
+  })
+}
+const color = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#3BA272']
+const initMap4 = (data: any) => {
+  const domMap = document.getElementById('EcharRef4')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    color: color,
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['100%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  }
+  myChart.setOption(option)
+}
+const activeName1 = ref('first')
+//获取考核
+const tablekaohe = ref<any>([])
+const getsummary = () => {
+  api.post('multialarm/client/user/summary', {}).then((res) => {
+    if (res.code == 0) {
+      tablekaohe.value = res.data
+    }
+  })
+}
 
-	const initMap1 = (data) => {
-		const domMap = document.getElementById("EcharRef1");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		const rawData = [
+const getqidata = () => {
+  api
+    .post('multialarm/system/alarm/count/dayline', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city
+    })
+    .then((res1) => {
+      initMap3(res1.data)
+    })
+}
+const tableData = ref<any>([])
+const gettkbr = () => {
+  api
+    .post('multialarm/system/alarm/count/org/days', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city
+    })
+    .then((res1) => {
+      console.log('表格', res1)
+      tableData.value = res1.data
+    })
+}
+const alldata = ref<any>({})
+const jierukaohe = ref([])
+const getalldata = () => {
+  api
+    .post('/multialarm/system/count/all', {
+      // name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city
+    })
+    .then((res1: any) => {
+      console.log('res1', res1)
+      alldata.value = res1.data
+      jierukaohe.value = res1.data.children
+      initMap1(res1.data.children)
+      initMap2(res1.data)
+    })
+}
+//行业分类
+const hangyedata = ref<any>([{}, {}, {}, {}, {}])
+const hangye = () => {
+  api
+    .post('/multialarm/system/station/summary', {
+      name: localStorage.getItem('loginname'),
+      city: city == '湖南省' ? null : city,
+      district: '',
+      town: ''
+    })
+    .then((res) => {
+      console.log('行业分类', res)
+      if (res.code == 0) {
+        hangyedata.value = res.data
+      }
+    })
+}
+const activeName = ref('first')
 
-		];
-		const citydata = [];
-		const districtdata = [];
-		let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; let arr5 = [];
-		data.forEach(x => {
-			arr1.push(x.alarmPointTotal);
-			arr5.push(x.platformTotal);
-			arr2.push(x.ipcTotal);
-			arr3.push(x.mdevTotal);
-			arr4.push(x.aiTotal);
-			citydata.push(x.city);
-			districtdata.push(x.district);
-		});
-		rawData.push(arr1, arr5, arr2, arr3, arr4)
-		// console.log('??',rawData)
-		const totalData = [];
-		for (let i = 0; i < rawData[0].length; ++i) {
-			let sum = 0;
-			for (let j = 0; j < rawData.length; ++j) {
-				sum += rawData[j][i];
-			}
-			totalData.push(sum);
-		}
-		const grid = {
-			left: 0,
-			right: 0,
-			top: 60,
-			bottom: 30
-		};
-		const series = [
-			'报警点位',
-			'对讲点位',
-			'安保数量',
-			'复核设备',
-			'AI设备',
-		].map((name, sid) => {
-			return {
-				name,
-				type: 'bar',
-				stack: 'total',
-				barWidth: '20%',
-				itemStyle: {
-					barBorderRadius: [30, 30, 30, 100],
-				},
-				data: rawData[sid].map((d, did) =>
-					totalData[did] <= 0 ? 0 : d / totalData[did]
-				)
-			};
-		});
-		var option = {
-			color: ['#659BF9', '#B5B3FD', '#53CFC7', '#D78BF3'],
-			legend: {
-				selectedMode: false,
-			},
-			grid,
-			yAxis: {
-				type: 'value'
-			},
-			xAxis: {
-				type: 'category',
-				data: city == '湖南省' ? citydata : districtdata,
-			},
-			series
-		};
-		myChart.setOption(option);
-	};
-	const initMap2 = (data) => {
-		const domMap = document.getElementById("EcharRef2");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			color: ['#679AF6', '#ABBCE7', '#E2E9FD', '#FEACAF', '#FE5664'],
-			series: [
-				{
-					name: 'Access From',
-					type: 'pie',
-					radius: ['40%', '70%'],
-					avoidLabelOverlap: false,
-					label: {
-						show: false,
-						position: 'center'
-					},
-					emphasis: {
-						label: {
-							show: true,
-							fontSize: 20,
-							fontWeight: 'bold'
-						}
-					},
-					labelLine: {
-						show: false
-					},
-					data: [
-						{ value: data.alarmPointZone, name: '防区点位' },
-						{ value: data.ipcTotal, name: '对讲点位' },
-						{ value: data.stationCount, name: '安保数量' },
-						{ value: data.mdevTotal, name: '复核设备' },
-						{ value: data.aiTotal, name: 'AI设备' }
-					]
-				}
-			]
-		};
-		myChart.setOption(option);
-	};
-	const initMap3 = (data) => {
-		console.log('data', data)
-		const xdata = [];
-		const countCasedata = [];
-		const countAlarmdata = [];
-		const countcountAI = [];
-		data.map((x) => {
-			xdata.push(x.year + '-' + x.month + '-' + x.day);
-			countCasedata.push(x.countCase);
-			countAlarmdata.push(x.countAlarm);
-			countcountAI.push(x.countAI);
-		})
-		const domMap = document.getElementById("EcharRef3");
-		domMap.removeAttribute("_echarts_instance_");
-		const myChart = echarts.init(domMap);
-		var option = {
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					type: 'cross',
-					crossStyle: {
-						color: '#999'
-					}
-				}
-			},
-			grid: {
-				left: 0,
-				right: 0,
-				top: 60,
-				bottom: 30
-			},
-			legend: {
-				data: ['警情', '报警', 'AI预警']
-			},
-			xAxis: [
-				{
-					type: 'category',
-					data: xdata,
-					axisPointer: {
-						type: 'shadow'
-					}
-				}
-			],
-			yAxis: [
-				{
-					type: 'value',
-					name: '',
-					min: 0,
-					max: 250,
-					interval: 50,
-					axisLabel: {
-						formatter: '{value} ml'
-					}
-				},
-				{
-					type: 'value',
-					name: '',
-					min: 0,
-					max: 25,
-					interval: 5,
-					axisLabel: {
-						formatter: ''
-					}
-				}
-			],
-			series: [
-				{
-					name: '警情',
-					type: 'bar',
-					barWidth: '20%',
-					tooltip: {
-						valueFormatter: function (value) {
-							return value;
-						}
-					},
-					data: countCasedata,
-				},
-				{
-					name: '报警',
-					type: 'line',
-					tooltip: {
-						valueFormatter: function (value) {
-							return value;
-						}
-					},
-					data: countAlarmdata,
-				},
-				{
-					name: 'AI预警',
-					type: 'line',
-					yAxisIndex: 1,
-					tooltip: {
-						valueFormatter: function (value) {
-							return value;
-						}
-					},
-					data: countcountAI
-				}
-			]
-		};
-		myChart.setOption(option);
-	};
+const initMap1 = (data: any) => {
+  const domMap = document.getElementById('EcharRef1')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  const rawData: any[][] = []
+  const citydata: any[] = []
+  const districtdata: any[] = []
+  let arr1: any[] = []
+  let arr2: any[] = []
+  let arr3: any[] = []
+  let arr4: any[] = []
+  let arr5: any[] = []
+  data.forEach((x: any) => {
+    arr1.push(x.alarmPointTotal)
+    arr5.push(x.platformTotal)
+    arr2.push(x.ipcTotal)
+    arr3.push(x.mdevTotal)
+    arr4.push(x.aiTotal)
+    citydata.push(x.city)
+    districtdata.push(x.district)
+  })
+  rawData.push(arr1, arr5, arr2, arr3, arr4)
+  // console.log('??',rawData)
+  const totalData: number[] = []
+  for (let i = 0; i < rawData[0].length; ++i) {
+    let sum = 0
+    for (let j = 0; j < rawData.length; ++j) {
+      sum += rawData[j][i]
+    }
+    totalData.push(sum)
+  }
+  const grid = {
+    left: 0,
+    right: 0,
+    top: 60,
+    bottom: 30
+  }
+  const series = ['报警点位', '对讲点位', '安保数量', '复核设备', 'AI设备'].map((name, sid) => {
+    return {
+      name,
+      type: 'bar',
+      stack: 'total',
+      barWidth: '20%',
+      itemStyle: {
+        barBorderRadius: [30, 30, 30, 100]
+      },
+      data: rawData[sid].map((d: any, did: any) => (totalData[did] <= 0 ? 0 : d / totalData[did]))
+    }
+  })
+  var option = {
+    color: ['#659BF9', '#B5B3FD', '#53CFC7', '#D78BF3'],
+    legend: {
+      selectedMode: false
+    },
+    grid,
+    yAxis: {
+      type: 'value'
+    },
+    xAxis: {
+      type: 'category',
+      data: city == '湖南省' ? citydata : districtdata
+    },
+    series
+  }
+  myChart.setOption(option)
+}
+const initMap2 = (data: any) => {
+  const domMap = document.getElementById('EcharRef2')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    color: ['#679AF6', '#ABBCE7', '#E2E9FD', '#FEACAF', '#FE5664'],
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {value: data.alarmPointZone, name: '防区点位'},
+          {value: data.ipcTotal, name: '对讲点位'},
+          {value: data.stationCount, name: '安保数量'},
+          {value: data.mdevTotal, name: '复核设备'},
+          {value: data.aiTotal, name: 'AI设备'}
+        ]
+      }
+    ]
+  }
+  myChart.setOption(option)
+}
+const initMap3 = (data: any) => {
+  console.log('data', data)
+  const xdata: any[] = []
+  const countCasedata: any[] = []
+  const countAlarmdata: any[] = []
+  const countcountAI: any[] = []
+  data.map((x: {year: string; month: string; day: string; countCase: any; countAlarm: any; countAI: any}) => {
+    xdata.push(x.year + '-' + x.month + '-' + x.day)
+    countCasedata.push(x.countCase)
+    countAlarmdata.push(x.countAlarm)
+    countcountAI.push(x.countAI)
+  })
+  const domMap = document.getElementById('EcharRef3')
+  domMap.removeAttribute('_echarts_instance_')
+  const myChart = echarts.init(domMap)
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      }
+    },
+    grid: {
+      left: 0,
+      right: 0,
+      top: 60,
+      bottom: 30
+    },
+    legend: {
+      data: ['警情', '报警', 'AI预警']
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: xdata,
+        axisPointer: {
+          type: 'shadow'
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 250,
+        interval: 50,
+        axisLabel: {
+          formatter: '{value} ml'
+        }
+      },
+      {
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 25,
+        interval: 5,
+        axisLabel: {
+          formatter: ''
+        }
+      }
+    ],
+    series: [
+      {
+        name: '警情',
+        type: 'bar',
+        barWidth: '20%',
+        tooltip: {
+          valueFormatter: function (value: any) {
+            return value
+          }
+        },
+        data: countCasedata
+      },
+      {
+        name: '报警',
+        type: 'line',
+        tooltip: {
+          valueFormatter: function (value: any) {
+            return value
+          }
+        },
+        data: countAlarmdata
+      },
+      {
+        name: 'AI预警',
+        type: 'line',
+        yAxisIndex: 1,
+        tooltip: {
+          valueFormatter: function (value: any) {
+            return value
+          }
+        },
+        data: countcountAI
+      }
+    ]
+  }
+  myChart.setOption(option)
+}
 </script>
 
 <style scoped lang="scss">
-	:deep(.el-table) {
-		--el-table-border-color: #1677ff40;
-	}
+:deep(.el-table) {
+  --el-table-border-color: #1677ff40;
+}
 
-	:deep(.el-table .cell) {
-		// padding: 7px 12px;
-	}
+:deep(.el-table th.el-table__cell) {
+  padding: 6px 0px;
+}
 
-	:deep(.el-table th.el-table__cell) {
-		padding: 6px 0px;
-		// background-color: #5C9AD5;
-	}
+:deep(.el-date-editor .el-range-input) {
+  color: #fff;
+}
 
-	:deep(.el-table thead) {
-		// color: #fff;
-	}
+:deep(.el-tabs) {
+  height: 100%;
+}
 
-	:deep(.el-table tr) {
-		// background-color: #E9F0F8;
-	}
+:deep(.el-table th.el-table__cell) {
+  background-color: #f5f7fa;
+}
 
-	:deep(.el-table__body tr.current-row > td) {
-		// background: #2cabff !important;
-	}
+:deep(.el-tabs__content) {
+  height: calc(100% - 53px);
+}
 
-	:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
-		// background-color:  #13306A !important;
-	}
+:deep(.el-tab-pane) {
+  height: 100%;
+}
 
-	:deep(.el-date-editor .el-range-input) {
-		color: #fff;
-	}
+::-webkit-scrollbar {
+  background-color: #071d4d;
+}
 
-	:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
-		// background: #D1DEEE !important;
-	}
+:deep(.el-table .el-table__cell) {
+  padding: 0px;
+}
 
+:deep(.el-table th.el-table__cell) {
+  background-color: #f2f7fd;
+}
 
-	:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
-		// background-color: transparent;
-	}
+:deep(.el-tabs__content) {
+  height: 100%;
+}
 
-	:deep(.el-tabs) {
-		height: 100%;
-	}
+:deep(.el-tabs__nav-wrap::after) {
+  background-color: #d9d9d95e;
+  height: 4px;
+}
 
-	:deep(.el-table th.el-table__cell) {
-		background-color: #F5F7FA;
-	}
+:deep(.el-tabs__item) {
+  color: #00000070;
+  font-weight: 700;
+}
 
-	:deep(.el-tabs__content) {
-		height: calc(100% - 53px);
-	}
+:deep(.el-tabs__header) {
+  margin: 0px;
+}
 
-	:deep(.el-tab-pane) {
-		height: 100%;
-	}
+:deep(.el-tabs) {
+  width: 100%;
+  --el-tabs-header-height: 50px;
+}
 
-	::-webkit-scrollbar {
-		background-color: #071D4D;
-	}
+:deep(.el-tabs__item.is-active) {
+  color: #000;
+}
 
-	:deep(.el-table .el-table__cell) {
-		padding: 0px;
-	}
+:deep(.el-tabs__active-bar) {
+  height: 4px;
+  background-color: #000;
+}
 
-	:deep(.el-table th.el-table__cell) {
-		background-color: #f2f7fd;
-	}
+:deep(.el-tabs__nav-wrap) {
+  padding-left: 23px;
+}
 
-	:deep(.el-tabs__content) {
-		height: 100%;
-	}
+.foou {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
 
-	:deep(.el-tabs__nav-wrap::after) {
-		background-color: #d9d9d95e;
-		height: 4px;
-	}
+.cont {
+  width: 100%;
+  height: 95%;
+  background: #fff;
+  font-family: 'Microsoft Ya Hei';
+  display: flex;
 
-	:deep(.el-tabs__item) {
-		color: #00000070;
-		font-weight: 700;
-	}
+  .left {
+    width: 66%;
+    margin-bottom: 20px;
+    margin-left: 10px;
+  }
 
-	:deep(.el-tabs__header) {
-		margin: 0px;
-	}
-
-	:deep(.el-tabs) {
-		width: 100%;
-		--el-tabs-header-height: 50px;
-	}
-
-	:deep(.el-tabs__item.is-active) {
-		color: #000;
-	}
-
-	:deep(.el-tabs__active-bar) {
-		height: 4px;
-		background-color: #000;
-	}
-
-	:deep(.el-tabs__nav-wrap) {
-		padding-left: 23px;
-	}
-
-	.foou {
-		width: 13px;
-		height: 13px;
-		border-radius: 50%;
-		margin-right: 5px;
-	}
-
-	.cont {
-		width: 100%;
-		height: 95%;
-		background: #fff;
-		font-family: 'Microsoft Ya Hei';
-		display: flex;
-
-		.left {
-			width: 66%;
-			margin-bottom: 20px;
-			margin-left: 10px;
-		}
-
-		.right {
-			width: 34%;
-			background: #fff;
-			padding: 10px;
-			margin-right: 10px;
-			margin-left: 8px;
-			margin-bottom: 20px;
-		}
-	}
-</style>
\ No newline at end of file
+  .right {
+    width: 34%;
+    background: #fff;
+    padding: 10px;
+    margin-right: 10px;
+    margin-left: 8px;
+    margin-bottom: 20px;
+  }
+}
+</style>