From 1e0d3bfa3aa651e81ea810b2defcf8d93d92c47d Mon Sep 17 00:00:00 2001
From: Vce <daisy_vce@yeah.net>
Date: Sat, 11 May 2024 11:10:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=B3=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/projectOverview.ts            |   10 +
 .../commandScreen/commandCenter/index.vue     |    2 +-
 .../commandScreen/commandCenter/rightAll.vue  |   82 +-
 .../dialogCompnnents/data-dialog.vue          |    5 +
 .../dialogCompnnents/major-hidder.vue         | 1248 +++++++++++++++++
 5 files changed, 1332 insertions(+), 15 deletions(-)
 create mode 100644 src/views/commandScreen/dialogCompnnents/major-hidder.vue

diff --git a/src/api/modules/projectOverview.ts b/src/api/modules/projectOverview.ts
index f142953..9a4a0f5 100644
--- a/src/api/modules/projectOverview.ts
+++ b/src/api/modules/projectOverview.ts
@@ -51,3 +51,13 @@ export const getStageOption = (params: {}) => {
 export const getParentChildTaskListApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/taskProgress/getParentChildList`, params);
 };
+
+
+// 隐患统计智能分析
+export const getSelectQualityStatisticsNumApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params);
+};
+
+export const getCountDangerLevelApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/countDangerLevel`, params);
+};
diff --git a/src/views/commandScreen/commandCenter/index.vue b/src/views/commandScreen/commandCenter/index.vue
index 2b9fbb3..58f43cf 100644
--- a/src/views/commandScreen/commandCenter/index.vue
+++ b/src/views/commandScreen/commandCenter/index.vue
@@ -9,7 +9,7 @@
 			<centerBottom class="centerBottom"></centerBottom>
 		</div>
 		<div class="right">
-			<rightAll class="rightAll"></rightAll>
+			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
 		</div>
 		<dataDialog ref="partyBuildRef"></dataDialog>
 	</div>
diff --git a/src/views/commandScreen/commandCenter/rightAll.vue b/src/views/commandScreen/commandCenter/rightAll.vue
index cce56b1..233a186 100644
--- a/src/views/commandScreen/commandCenter/rightAll.vue
+++ b/src/views/commandScreen/commandCenter/rightAll.vue
@@ -61,12 +61,14 @@ import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
-import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
+import { getProjectInspectRecordCountApi, getSelectQualityStatisticsNumApi, getCountDangerLevelApi } from "@/api/modules/projectOverview";
 import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
 const echartsTest = ref();
 let questionTotal = ref(0 as any);
 
+const emits = defineEmits(["openDialog"])
+
 let dateRange = ref([] as any);
 
 let majorDangerCount = ref(20 as any);
@@ -150,6 +152,7 @@ function Pie() {
 function drawEchart() {
 	echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
 	let option = {
+		animation: false, // 取消动画
 		tooltip: {
 			trigger: "item"
 		},
@@ -366,24 +369,47 @@ function drawEchart() {
 	})
 	console.log(echartsTest.value);
 	
-	// let chart = echarts.init(document.getElementById('main'), null)
-	// //图例点击事件
-	// echartsTest.value.on('legendselectchanged', params => {
-	// 	console.log(echartsTest);
+	//图例点击事件
+	echartsTest.value.on('legendselectchanged', (params:any) => {
+		console.log(emits);
+		echartsTest.value.setOption({
+                legend:{selected:{[params.name]: true}}
+        })
 		
-	// })
+		emits("openDialog",{
+			index:7,
+			title:params.name,
+		})
+	})
 }
 
 const getSafeInfo = async () => {
-	const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
+	// const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
 	// console.log("获取安全管理", res);
 	// safeData.value = res.result;
-	dataList.value[0].value = res.result.rectificationNum;
-	dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
-	questionTotal.value = res.result.totalNum;
+	// dataList.value[0].value = res.result.rectificationNum;
+	// dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
+	
+
+	const res: any = await getCountDangerLevelApi({ projectSn: store.sn,isOverdueRectification:true,  });
+	dataList.value = res.result.data.map((item:any,index:number) => {
+		return {
+		...item,
+		value: item.count,
+		show: true,
+		itemStyle: {
+			normal: {
+				color: index == 0 ? "#EC6266" : '#6375C7',
+				borderWidth: 20
+			}
+		}
+	 };
+	});
+	questionTotal.value = res.result.count;
 	drawEchart();
 };
 
+
 let dataList2 = ref([
 	{
 		value: 30,
@@ -632,16 +658,44 @@ function drawEchart2() {
 }
 
 const qualityInfo = async () => {
-	const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
-	dataList2.value[0].value = res.result.total.rectificationNum;
-	dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
-	questionTotal.value = res.result.total.totalNum;
+	// const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
+	// dataList2.value[0].value = res.result.total.rectificationNum;
+	// dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
+	// questionTotal.value = res.result.total.totalNum;
+
+	const res: any = await getCountDangerLevelApi({ projectSn: store.sn,isNotQualified:true,  });
+	dataList2.value = res.result.data.map((item:any,index:number) => {
+		return {
+		...item,
+		value: item.count,
+		show: true,
+		itemStyle: {
+			normal: {
+				color: index == 0 ? "#038cf5" : '#01d6f4',
+				borderWidth: 20
+			}
+		}
+	 };
+	});
+	questionTotal.value = res.result.count;
+
 	drawEchart2();
 };
 
+const getSelectQualityStatisticsNum= async () => {
+	const res: any = await getSelectQualityStatisticsNumApi({ projectSn: store.sn, });
+	console.log(res);
+	overdueMajorDangerCount.value = res.result.overdueRectificationNum;
+	overdueMajorDangerRate.value = res.result.overdueRectificationNumRatio;
+	majorDangerCount.value = res.result.notCloseNum;
+	// majorDangerRate.value = res.result.overdueRectificationNumRatio;
+}
+
+
 onMounted(async () => {
 	await getSafeInfo();
 	await qualityInfo();
+	await getSelectQualityStatisticsNum();
 });
 </script>
 
diff --git a/src/views/commandScreen/dialogCompnnents/data-dialog.vue b/src/views/commandScreen/dialogCompnnents/data-dialog.vue
index a7835ae..d2cf7db 100644
--- a/src/views/commandScreen/dialogCompnnents/data-dialog.vue
+++ b/src/views/commandScreen/dialogCompnnents/data-dialog.vue
@@ -28,6 +28,9 @@
 			<div class="political-outlook" v-if="showIndex == 6">
 				<aiAlarm ref="historyAlarmList" tip="安全教育"></aiAlarm>
 			</div>
+			<div class="political-outlook" v-if="showIndex == 7">
+				<majorHidder ref="historyAlarmList" tip="重大隐患未销项目"></majorHidder>
+			</div>
 		</div>
 	</div>
 </template>
@@ -40,6 +43,8 @@ import weatherInfo from "./weather-info.vue";
 import riskCount from "./risk-count.vue";
 import safeHidden from "./safe-hidden.vue";
 import aiAlarm from "./ai-alarm.vue";
+import majorHidder from "./major-hidder.vue";
+
 import { GlobalStore } from "@/stores";
 let showDialog = ref(false as any);
 const showIndex = ref(0);
diff --git a/src/views/commandScreen/dialogCompnnents/major-hidder.vue b/src/views/commandScreen/dialogCompnnents/major-hidder.vue
new file mode 100644
index 0000000..4ca0aa3
--- /dev/null
+++ b/src/views/commandScreen/dialogCompnnents/major-hidder.vue
@@ -0,0 +1,1248 @@
+<template>
+    <div class="political-outlook">
+        <div class="content">
+            <div class="content-box">
+                <div class="contentTop">
+                    <div class="ctHead">
+                        <div>按分包单位排名</div>
+                    </div>
+                    <div class="ctContent">
+                        <div id="echartsSafe" ref="echarts1" style="width: 100%; height: 100%"></div>
+                    </div>
+                </div>
+                <div class="contentTop">
+                    <div class="ctHead">
+                        <div>按责任区域排名</div>
+                    </div>
+                    <div class="ctContent">
+                        <div id="echartsSafe" ref="echarts2" style="width: 100%; height: 100%"></div>
+                    </div>
+                </div>
+                <div class="contentTop">
+                    <div class="ctHead">
+                        <div>安全隐患类型分析</div>
+                    </div>
+                    <div class="ctContent">
+                        <div id="echartsSafe" ref="echarts3" style="width: 100%; height: 100%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-one">
+            <div class="tabList">
+                <div>序号</div>
+                <div>状态</div>
+                <div>隐患级别</div>
+                <div>隐患描述及要求</div>
+                <div>整改时限</div>
+                <div>检查人</div>
+                <div>检查时间</div>
+                <div>整改人</div>
+                <div>分包单位</div>
+                <div>操作</div>
+            </div>
+            <el-scrollbar class="listBox" ref="refScrollbar">
+                <div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
+                    <div>{{ index + 1 }}</div>
+                    <div>{{ item.workerName }}</div>
+                    <div class="list-img">
+                        <el-image fit="contain" class="el-img" :src="BASEURL + '/image/' + item.fieldAcquisitionUrl"
+                            :preview-src-list="[BASEURL + '/image/' + item.fieldAcquisitionUrl]">
+                        </el-image>
+                        <!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
+                    </div>
+                    <div>{{ item.phoneNumber }}</div>
+                    <div>{{ item.personType == 1 ? item.teamName : item.personType == 2 ? item.departmentName : "" }}
+                    </div>
+                    <div>{{ item.phoneNumber }}</div>
+                </div>
+                <!-- <div class="notoDta" v-if="partyMemberList.length == 0">
+                    <img src="@/assets/images/noData.png" alt="" />
+                    <p>暂无数据</p>
+                </div> -->
+            </el-scrollbar>
+        </div>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
+import type { TabsPaneContext } from "element-plus";
+import { getSelectQualityStatisticsNumApi } from "@/api/modules/projectOverview";
+
+import * as echarts from "echarts";
+const echartsTest = ref();
+
+let dataList = ref([
+    {
+        value: 30,
+        show: true,
+        name: "重大隐患",
+        itemStyle: {
+            normal: {
+                color: "#EC6266",
+                borderWidth: 20
+            }
+        }
+    },
+    {
+        value: 70,
+        show: true,
+        name: "一般隐患",
+        itemStyle: {
+            normal: {
+                color: "#6375C7",
+                borderWidth: 20
+            }
+        }
+    }
+]);
+
+const echarts1 = ref(null);
+const echarts2 = ref(null);
+const echarts3 = ref(null);
+
+
+const store = GlobalStore();
+const props = defineProps(["tip"]);
+const BASEURL = import.meta.env.VITE_API_URL;
+const dateTime = ref(null);
+const calendarVal = ref(new Date());
+const activeName = ref("first");
+const activeIndex = ref("1" as any);
+const onlineWorkList = ref([
+    { name: "在职", value: 1 },
+    { name: "离职", value: 2 }
+]);
+const enterpriseListData = ref([] as any);
+const memberTypeList = ref([
+    { name: "劳务人员", value: 1 },
+    { name: "管理人员", value: 2 },
+    { name: "临时人员", value: 3 }
+]);
+const alarmTypeList = ref(["报警", "预警"]);
+let pageNo = ref(1 as any);
+let moreScroll = ref(true as any);
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const deviceList = ref([] as any); // 设备列表
+const searchForm = ref({
+    memberType: "",
+    belongCompany: "",
+    workState: "",
+    name: "",
+    idCard: ""
+});
+
+const partyMemberList = ref({} as any);
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+    //   console.log(tab, event)
+    //   console.log('tab',tab.index)
+    //   console.log('activeName',activeName.value)
+    //   if(activeName.value === 'first') console.log('1')
+    //   if(activeName.value === 'second') console.log('2')
+    //   if(activeName.value === 'third') console.log('3')
+    activeIndex.value = tab.index;
+    console.log("activeIndex", activeIndex.value);
+};
+//获取企业列表
+const getCompanyList = async () => {
+    let data = {
+        projectSn: store.sn,
+        enterpriseName: "",
+        userEnterpriseId: store.userInfo?.userEnterpriseId
+    };
+    const res: any = await getCompanyDataList(data);
+    if (res.code == 200) {
+        enterpriseListData.value = res.result;
+    }
+};
+//获取数据
+const getMemberCountList = async (tip: any) => {
+    let requestData: any = {
+        projectSn: store.sn,
+        personType: searchForm.value.memberType, //人员类型
+        enterpriseId: searchForm.value.belongCompany, //所属企业
+        inserviceType: searchForm.value.workState, //在职状态
+        idCard: searchForm.value.idCard, //身份证号
+        workerName: searchForm.value.name, //姓名
+        pageNo: tip == "search" ? 1 : pageNo.value,
+        pageSize: 100
+    };
+    if (props.tip == "实时") {
+        requestData.presence = 1;
+    } else if (props.tip == "日累积") {
+        requestData.attendance = 1;
+    } else {
+        requestData.inserviceType = 1;
+    }
+    const res: any = await getMemberInfoList(requestData);
+    console.log("获取人员信息列表", res);
+    if (tip == "more") {
+        partyMemberList.value = partyMemberList.value.concat(res.result.records);
+    } else {
+        partyMemberList.value = res.result.records;
+    }
+    // 为图片拼接IP
+    // partyMemberList.value.map((item:any) => {
+    // 	item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
+    // })
+    if (res.result.pages == pageNo.value) {
+        moreScroll.value = false;
+    } else {
+        pageNo.value = pageNo.value + 1;
+    }
+};
+
+function Pie() {
+    let dataArr = [];
+    for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+            dataArr.push({
+                name: (i + 1).toString(),
+                value: 10,
+                itemStyle: {
+                    normal: {
+                        color: "#7cf4f1",
+                        borderWidth: 0,
+                        borderColor: "#7f6546"
+                    }
+                }
+            });
+        } else {
+            dataArr.push({
+                name: (i + 1).toString(),
+                value: 10,
+                itemStyle: {
+                    normal: {
+                        color: "rgba(0,0,0,0)",
+                        borderWidth: 0,
+                        borderColor: "rgba(0,0,0,0)"
+                    }
+                }
+            });
+        }
+    }
+    return dataArr;
+}
+
+function drawEchart1() {
+    let echartsTest = echarts.init(echarts1.value);
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
+                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data: ['Mon11', 'Tue', 'Wed'],
+            axisLabel: {
+                color: "#fff",
+                formatter: function (params: any) {
+                    var val = "";
+                    if (params.length > 4) {
+                        val = params.substr(0, 4) + '...';
+                        return val
+                    } else {
+                        return params
+                    }
+                }
+            },
+            axisTick: {
+                // 轴刻度
+                show: false,
+                lineStyle: {
+                    color: '#112F66',
+                },
+
+            },
+            axisLine: {
+                show: true,
+
+                lineStyle: {
+                    color: "#112F66"
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#112F66',
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: "#fff",
+            },
+            axisTick: {
+                // 轴刻度
+                show: true,
+                color: '#112F66',
+            },
+            axisLine: {
+                show: true,
+                // 轴线
+                lineStyle: {
+                    color: "#112F66"
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#112F66',
+                }
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '5%',
+            bottom: '3%',
+            containLabel: true
+        },
+        series: [
+            {
+                data: [120, 200, 150],
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                        {
+                            offset: 0,
+                            color: "#80f7ea"
+
+                        },
+                        {
+                            offset: 1,
+                            color: "#366ef3"
+                        }
+                    ])
+                }
+            }
+        ]
+    };
+    echartsTest.setOption(option, true);
+    window.addEventListener("resize", () => {
+        console.log(echartsTest)
+        echartsTest.resize();
+    })
+    console.log(echartsTest);
+}
+
+function drawEchart2() {
+    let ageChart = echarts.init(echarts2.value);
+    
+    var data = [
+  { code: "5#号楼", stock: "aaa", fundPost: "21.987691" },
+  { code: "4#号楼", stock: "bbb", fundPost: "20.377176" },
+  { code: "3#号楼", stock: "ccc", fundPost: "19.127404" },
+  { code: "2#号楼", stock: "ddd", fundPost: "18.40882" },
+  { code: "1#号楼", stock: "eee", fundPost: "17.980597" },
+];
+function contains(arr, dst) {
+  var i = arr.length;
+  while ((i -= 1)) {
+    if (arr[i] == dst) {
+      return i;
+    }
+  }
+  return false;
+}
+
+let attackSourcesColor = [
+   "#0E90E5",
+    "#0E90E5",
+     "#0E90E5",
+      "#0E90E5",
+];
+let attackSourcesColor1 = [
+  "#0E90E5",
+  "#0E90E5",
+  "#0E90E5",
+  "#0E90E5",
+  "#0E90E5",
+];
+let attaData = [];
+let attaName = [];
+let topName = [];
+data.forEach((it, index) => {
+  attaData[index] = parseFloat(it.fundPost).toFixed(2);
+  attaName[index] = it.stock;
+  topName[index] = `${it.code}`;
+});
+var salvProMax = []; //背景按最大值
+for (let i = 0; i < attaData.length; i++) {
+  salvProMax.push(attaData[0]);
+}
+function attackSourcesDataFmt(sData) {
+  var sss = [];
+  sData.forEach(function (item, i) {
+    let itemStyle = {
+      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
+    };
+    sss.push({
+      value: item,
+      itemStyle: itemStyle,
+    });
+  });
+  return sss;
+}
+
+let option = {
+//   backgroundColor: "#000",
+  tooltip: {
+    show: true,
+    // backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
+    textStyle: {
+      fontSize: 16,
+    },
+  },
+  color: ["#F7B731"],
+  legend: {
+    pageIconSize: [12, 12],
+    itemWidth: 20,
+    itemHeight: 10,
+    textStyle: {
+      //图例文字的样式
+      fontSize: 10,
+      color: "#fff",
+    },
+    selectedMode: false,
+    // data: ["个人所得(亿元)"],
+  },
+  grid: {
+    left: "2%",
+    right: "2%",
+    width: "100%",
+    bottom: "2%",
+    top: "8%",
+    // containLabel: true,
+  },
+  xAxis: {
+    type: "value",
+
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+  },
+  yAxis: [
+    {
+      type: "category",
+      inverse: true,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisPointer: {
+        label: {
+          show: true,
+          //margin: 30
+        },
+      },
+      pdaaing: [5, 0, 0, 0],
+      postion: "right",
+      data: attaName,
+      axisLabel: {
+        margin: 30,
+        fontSize: 10,
+        align: "left",
+        padding: [10, 0, 0, 0],
+        color: "#000",
+        rich: {
+          nt1: {
+            color: "#fff",
+            backgroundColor: attackSourcesColor1[0],
+            width: 13,
+            height: 13,
+            fontSize: 10,
+            align: "center",
+            borderRadius: 100,
+            lineHeight: "5",
+            padding: [0, 1, 2, 1],
+            // padding:[0,0,2,0],
+          },
+          nt2: {
+            color: "#fff",
+            backgroundColor: attackSourcesColor1[1],
+            width: 13,
+            height: 13,
+            fontSize: 10,
+            align: "center",
+            borderRadius: 100,
+            padding: [0, 1, 2, 1],
+          },
+          nt3: {
+            color: "#fff",
+            backgroundColor: attackSourcesColor1[2],
+            width: 13,
+            height: 13,
+            fontSize: 10,
+            align: "center",
+            borderRadius: 100,
+            padding: [0, 1, 2, 1],
+          },
+          nt: {
+            color: "#fff",
+            backgroundColor: attackSourcesColor1[3],
+            width: 13,
+            height: 13,
+            fontSize: 10,
+            align: "center",
+            lineHeight: 3,
+            borderRadius: 100,
+            padding: [0, 1, 2, 1],
+            lineHeight: 5,
+          },
+        },
+        // formatter: function (value, index) {
+        //   index = contains(attaName, value) + 1;
+        //   if (index - 1 < 3) {
+        //     return ["{nt" + index + "|" + index + "}"].join("\n");
+        //   } else {
+        //     return ["{nt|" + index + "}"].join("\n");
+        //   }
+        // },
+      },
+    },
+    {
+        type: "category",
+      inverse: true,
+      axisTick: "none",
+      axisLine: "none",
+      show: true,
+      axisLabel: {
+        margin: 30,
+         padding: [-120, 0, 0, -100],
+        textStyle: {
+          color: "#fff",
+          fontSize: "10",
+        },
+      },
+      data: attackSourcesDataFmt(attaName),
+    },
+    {
+      //名称
+      type: "category",
+      offset: -10,
+      position: "left",
+      axisLabel: {
+        color: `#fff`,
+        fontSize: 10,
+      },
+      axisLine: {
+        show: false,
+      },
+      inverse: false,
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        color: ["#fff"],
+        align: "left",
+        verticalAlign: "bottom",
+        lineHeight: 32,
+        fontSize: 10,
+      },
+      data: topName,
+    },
+  ],
+  series: [
+    {
+      zlevel: 1,
+      // name: "个人所得(亿元)",
+      type: "bar",
+      barWidth: "15px",
+      animationDuration: 1500,
+      data: attackSourcesDataFmt(attaData),
+      align: "center",
+      itemStyle: {
+        normal: {
+          // barBorderRadius: 10,
+        },
+      },
+      label: {
+        show: false,
+        fontSize: 10,
+        color: "#fff",
+        textBorderWidth: 2,
+        padding: [2, 0, 0, 0],
+      },
+    },
+    {
+      // name: "个人所得(亿元)",
+      type: "bar",
+      barWidth: 13,
+      barGap: "-50%",
+      margin: "30",
+      data: salvProMax,
+      textStyle: {
+        //图例文字的样式
+        fontSize: 10,
+        color: "#fff",
+      },
+      itemStyle: {
+        normal: {
+          color: "#06407B",
+          //width:"100%",
+          fontSize: 10,
+          // barBorderRadius: 30,
+        },
+      },
+    },
+  ],
+};
+
+
+    ageChart.setOption(option, true);
+    window.addEventListener("resize", () => {
+        ageChart.resize();
+    })
+}
+
+function drawEchart3() {
+    console.log(echarts3.value);
+
+    echartsTest.value = echarts.init(echarts3.value);
+    let option = {
+        tooltip: {
+            trigger: "item"
+        },
+        title: {
+            text: "2",
+            subtext: "超期未整改数",
+            x: "24%",
+            y: "center",
+            textAlign: "center",
+            textStyle: {
+                color: "#fff",
+                fontSize: 26,
+                fontWeight: "normal",
+                // align: "center",
+                fontFamily: "sadigitalNumber"
+            },
+            subtextStyle: {
+                color: "#ccc",
+                fontSize: 12,
+                fontWeight: "normal"
+                // align: "center"
+            }
+        },
+        legend: {
+            selectedMode: true, // 取消图例上的点击事件
+            icon: "rect",
+            type: "plain",
+            orient: "vertical",
+            left: "55%",
+            top: "35%",
+            align: "left",
+            itemGap: 30,
+            itemWidth: 8, // 设置宽度
+            itemHeight: 7, // 设置高度
+            symbolKeepAspect: false,
+            textStyle: {
+                color: "#000",
+                rich: {
+                    name: {
+                        verticalAlign: "right",
+                        align: "left",
+                        fontSize: 14,
+                        color: "#FFFFFF"
+                    },
+                    value: {
+                        align: "left",
+                        fontSize: 14,
+                        color: "#FFFFFF"
+                    }
+                }
+            },
+            data: dataList.value.map(item => {
+                if (item.show) {
+                    return item.name;
+                }
+            }),
+            formatter: function (data) {
+                if (dataList.value && dataList.value.length) {
+                    for (var i = 0; i < dataList.value.length; i++) {
+                        if (data === dataList.value[i].name) {
+                            var value = dataList.value[i].value;
+                            var percentage = value + "%";
+                            return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
+                        }
+                    }
+                }
+            }
+        },
+        series: [
+            // 外侧光线
+            {
+                name: "",
+                type: "gauge",
+                center: ["25%", "55%"],
+                radius: "90%",
+                startAngle: 235,
+                endAngle: -50,
+                min: 0,
+                max: 100,
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        width: 2,
+                        color: [
+                            [
+                                100 / 100,
+                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#526277"
+                                    },
+                                    {
+                                        offset: 0.25,
+                                        color: "rgba(4, 14, 54,0.4)"
+                                    },
+                                    {
+                                        offset: 0.7,
+                                        color: "rgba(4, 14, 54,0.4)"
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#526277"
+                                    }
+                                ])
+                            ],
+                            [1, "rgba(255,255,255,0)"]
+                        ]
+                    }
+                },
+
+                axisTick: {
+                    show: 0
+                },
+                splitLine: {
+                    show: 0
+                },
+                axisLabel: {
+                    show: 0
+                },
+                pointer: {
+                    show: 0
+                },
+                detail: {
+                    show: 0
+                }
+            },
+            {
+                name: "",
+                type: "gauge",
+                center: ["25%", "55%"],
+                radius: "80%",
+                startAngle: 245,
+                endAngle: -115,
+                min: 0,
+                max: 100,
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        width: 2,
+                        color: [
+                            [
+                                200 / 100,
+                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                    {
+                                        offset: 1,
+                                        color: "#52bef0"
+                                    },
+                                    {
+                                        offset: 0,
+                                        color: "#13356b"
+                                    }
+                                ])
+                            ],
+                            [1, "rgba(255,255,255,0)"]
+                        ]
+                    }
+                },
+
+                axisTick: {
+                    show: 0
+                },
+                splitLine: {
+                    show: 0
+                },
+                axisLabel: {
+                    show: 0
+                },
+                pointer: {
+                    show: 0
+                },
+                detail: {
+                    show: 0
+                }
+            },
+            {
+                name: "",
+                type: "pie",
+                radius: [65, 75],
+                center: ["25%", "55%"],
+                hoverAnimation: true,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderWidth: 10
+                },
+                label: {
+                    show: false,
+                    position: "center"
+                },
+                emphasis: {
+                    label: {
+                        show: false
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: dataList.value
+            },
+            {
+                type: "pie",
+                radius: ["57", "60"],
+                center: ["25%", "55%"],
+                label: {
+                    show: false
+                },
+                data: Pie()
+            }
+        ]
+    }
+    echartsTest.value.setOption(option, true);
+    window.addEventListener("resize", () => {
+        console.log(echartsTest)
+        echartsTest.value.resize();
+    })
+    console.log(echartsTest.value);
+}
+
+const getSafeInfo = async () => {
+    const res: any = await getSelectQualityStatisticsNumApi({ projectSn: store.sn });
+    console.log("获取隐患智能分析", res);
+    // safeData.value = res.result;
+    // dataList.value[0].value = res.result.rectificationNum;
+    // dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
+    // questionTotal.value = res.result.totalNum;
+    // drawEchart();
+};
+
+onMounted(async () => {
+    await getSafeInfo();
+    drawEchart1();
+    drawEchart2();
+    drawEchart3();
+    // await getCompanyList();
+    // await getMemberCountList("search");
+    refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+        // console.log("滚动容器", e);
+        const scrollTop = e.target.scrollTop;
+        const scrollHeight = e.target.scrollHeight;
+        const clientHeight = e.target.clientHeight;
+        // console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
+        // 向上加载更多
+        if (scrollTop >= scrollHeight - clientHeight - 1) {
+            // console.log("加载更多");
+            if (moreScroll.value) {
+                getMemberCountList("more");
+            }
+        }
+    });
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+    padding: 0 20px;
+    height: 35%;
+
+    .content-box {
+        display: flex;
+        flex-direction: row;
+
+        .contentTop {
+            margin-top: 10px;
+            width: 33%;
+            height: 100%;
+
+            .ctHead {
+                // background-color: #002f69;
+                padding-bottom: 5px;
+                color: #fff;
+                height: 15%;
+                font-size: 16px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-end;
+
+                text {
+                    font-size: 24px;
+                    color: #fc4c4c;
+                }
+            }
+
+            .ctContent {
+                height: 100%;
+                // background-color: darkred;
+            }
+        }
+    }
+
+}
+
+@mixin flex {
+    display: flex;
+    align-items: center;
+}
+
+.political-outlook {
+    height: 97%;
+    margin: 0 60px;
+
+    .content {
+        // height: 95%;
+        width: 100%;
+        margin-top: 30px;
+        // background: url("@/assets/images/cardImg.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 20px 15px;
+
+        .top-statistics {
+            display: grid;
+            grid-gap: 20px;
+            grid-template-columns: repeat(3, 1fr);
+            color: white;
+            margin: 0 5%;
+
+            .statistics-item {
+                width: 240px;
+                height: 95px;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                align-items: center;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    top: 4%;
+                    left: 4%;
+                }
+
+                &-content {
+                    display: inline-block;
+                    width: 50%;
+                    height: auto;
+                    text-indent: 1.5em;
+                }
+
+                &-content:nth-child(2) {
+                    margin-top: 8%;
+                }
+
+                &-content:nth-child(3) {
+                    margin-top: 8%;
+                }
+            }
+
+            .statistics-item:nth-child(1) {
+                background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .statistics-item:nth-child(2) {
+                background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .statistics-item:nth-child(3) {
+                background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .statistics-item:nth-child(4) {
+                background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .statistics-item:nth-child(5) {
+                background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .statistics-item:nth-child(6) {
+                background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .top-data-show {
+            display: flex;
+
+            .top-left {
+                width: 60%;
+                display: flex;
+                flex-direction: column;
+
+                :deep() {
+                    .el-calendar {
+                        background-color: transparent;
+                    }
+
+                    .el-calendar__header {
+                        display: none;
+                    }
+
+                    .el-calendar__body {
+                        padding: 0px;
+                    }
+
+                    .el-calendar-table thead {
+                        background-color: #143a85;
+
+                        th {
+                            color: white;
+                        }
+
+                        th:nth-child(1) {
+                            border-left: 1px solid #284a8e;
+                        }
+
+                        th:last-child {
+                            border-right: 1px solid #284a8e;
+                        }
+                    }
+
+                    .el-calendar-table .el-calendar-day:hover {
+                        color: white;
+                        background-color: #143a85;
+                    }
+
+                    .el-calendar-table td.is-today {
+                        color: white;
+                        background-color: #143a85;
+                    }
+
+                    .el-calendar-table tbody {
+                        .el-calendar-table__row {
+
+                            .prev,
+                            .current,
+                            .next {
+                                border-color: #35538c;
+                                color: white;
+
+                                .el-calendar-day {
+                                    text-align: center;
+                                    height: 40px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .top-right {
+                width: 40%;
+                color: white;
+
+                .right-title-data {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+
+                    >div {
+                        span:nth-child(1) {
+                            font-size: 18px;
+                            margin-right: 5px;
+                        }
+                    }
+
+                    >span {
+                        margin-top: 5px;
+                    }
+                }
+
+                .right-inspect-data {
+                    margin-top: 12%;
+
+                    .inspect-data-item {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 3%;
+
+                        .inspect-style {
+                            width: 10px;
+                            height: 10px;
+                            border: 1px solid #fff;
+                            margin-right: 5px;
+                            margin-top: 2px;
+                        }
+
+                        .inspect-one {
+                            background-color: #EE1A1A;
+                        }
+
+                        .inspect-two {
+                            background-color: #079CAF;
+                        }
+
+                        .inspect-three {
+                            background-color: #FFDF00;
+                        }
+
+                        >span:nth-child(2) {
+                            margin-right: auto
+                        }
+
+                        >span:nth-child(3) {
+                            margin-right: 10px;
+                        }
+                    }
+                }
+            }
+        }
+
+
+
+        :deep() {
+            .el-tabs__item {
+                color: white;
+            }
+
+            .el-tabs__item.is-active {
+                color: var(--el-color-primary);
+            }
+        }
+    }
+}
+
+.table-one {
+    margin-top: 40px;
+    height: 50%;
+
+    .tabList {
+        display: flex;
+        // width: 100%;
+        height: 10%;
+        background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+        background-size: 100% 100%;
+        // position: absolute;
+        left: 75.5%;
+        top: 75%;
+        color: #ccc;
+        font-size: calc(100vw * 14 / 1920);
+        line-height: 30px;
+        align-items: center;
+        margin-top: 1%;
+
+        div {
+            text-align: center;
+            width: 17%;
+        }
+    }
+
+    .listBox {
+        height: 69%;
+
+        .listStyle {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            color: #fff;
+            font-size: 12px;
+            margin-bottom: 5px;
+
+            .list-img {
+                .el-img {
+                    width: 30px;
+                    height: 30px;
+
+                    img {
+                        display: flex;
+                        align-items: center;
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+
+            div {
+                width: 17%;
+                white-space: nowrap; //单行
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .listStyle:hover {
+            background: #091f3f;
+        }
+    }
+}
+
+.notoDta {
+    top: 35%;
+    width: 20%;
+    left: 40%;
+    position: absolute;
+    text-align: center;
+
+    img {
+        width: 40%;
+        margin: 5% 30%;
+    }
+
+    p {
+        color: #fff;
+        font-size: calc(100vw * 14 / 1920);
+        margin: -6% 37%;
+    }
+}
+
+// element 组件样式
+:deep() {
+
+    .el-date-editor .el-range-input,
+    .el-range-separator {
+        color: #fff;
+    }
+
+    .el-input__wrapper {
+        background: #112d59;
+    }
+
+    .el-input__inner {
+        color: #fff;
+    }
+
+    .el-button {
+        background-color: #2758c0;
+        color: white;
+        border-color: transparent;
+    }
+}
+
+// ::v-deep .el-select .el-input .el-select__caret {
+// 	color: #fff;
+// }</style>