dev:调整指挥部大屏布局

src/views/commandScreen/commandCenter/leftBottom.vue

@@ -59,7 +59,7 @@ let listData = ref([
 ])
 
 let questionTotal = ref(0 as any);
-let dataList = ref([
+let dataList2 = ref([
 	{
 		value: 30,
 		show: true,
@@ -94,6 +94,7 @@ let dataList = ref([
 		}
 	}
 ]);
+
 function Pie() {
 	let dataArr = [];
 	for (var i = 0; i < 150; i++) {
@@ -126,7 +127,7 @@ function Pie() {
 	return dataArr;
 }
 
-function drawEchart() {
+function drawEchart2() {
 	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
 	let option = {
 		tooltip: {
@@ -182,16 +183,16 @@ function drawEchart() {
 					}
 				}
 			},
-			data: dataList.value.map(item => {
+			data: dataList2.value.map(item => {
 				if (item.show) {
 					return item.name;
 				}
 			}),
 			formatter: function (data) {
-				if (dataList.value && dataList.value.length) {
+				if (dataList2.value && dataList2.value.length) {
-					for (var i = 0; i < dataList.value.length; i++) {
+					for (var i = 0; i < dataList2.value.length; i++) {
-						if (data === dataList.value[i].name) {
+						if (data === dataList2.value[i].name) {
-							var value = dataList.value[i].value;
+							var value = dataList2.value[i].value;
 							var percentage = value + "%";
 							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
 						}
@@ -327,7 +328,7 @@ function drawEchart() {
 				labelLine: {
 					show: false
 				},
-				data: dataList.value
+				data: dataList2.value
 			},
 			{
 				type: "pie",
@@ -351,10 +352,10 @@ function drawEchart() {
 // const safeData = ref(null as any);
 const qualityInfo = async () => {
 	const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
-	dataList.value[0].value = res.result.total.rectificationNum;
+	dataList2.value[0].value = res.result.total.rectificationNum;
-	dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
+	dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
 	questionTotal.value = res.result.total.totalNum;
-	drawEchart();
+	drawEchart2();
 };
 //将方法暴露给父组件
 defineExpose({

src/views/commandScreen/commandCenter/leftTop.vue

@@ -10,14 +10,16 @@
 		</div>
 		<div class="content">
 			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-				<el-tab-pane label="整改人" name="first"></el-tab-pane>
+				<el-tab-pane :label="'整改人'" name="first"></el-tab-pane>
-				<el-tab-pane label="检查人" name="second"></el-tab-pane>
+				<el-tab-pane :label="'检查人'" name="second"></el-tab-pane>
-				<el-tab-pane label="按分包单位分析" name="third"></el-tab-pane>
+				<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
 			</el-tabs>
 			<div class="tabList">
 				<div>排名</div>
-				<div>姓名</div>
+				<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
-				<div>整改数量</div>
+				<div v-if="activeIndex === '2'">分组单位</div>
+				<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
+				<div v-if="activeIndex === '1'">发起隐患处</div>
 				<div>整改率</div>
 				<div>及时整改率</div>
 			</div>
@@ -47,10 +49,18 @@ import { getStageOption } from "@/api/modules/projectOverview";
 import type { TabsPaneContext } from 'element-plus'
 
 const activeName = ref('first')
+const activeIndex = ref('1' as any)
 let dateRange = ref([] as any)
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, 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 tabList = [
   { sortLine: '1', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},

src/views/commandScreen/commandCenter/rightAll.vue

@@ -23,7 +23,8 @@
 					<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
 				</div>
 				<div class="cmContent">
-					<div id="echartsMajorDanger" style="width: 100%; height: 100%"></div>
+					<div id="echarts2" style="width: 100%; height: 100%"></div>
+					<!-- <div id="echartsMajorDanger" style="width: 100%; height: 100%"></div> -->
 				</div>
 			</div>
 
@@ -59,10 +60,11 @@
 import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
-import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
+// import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
-import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
+// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
 const store = GlobalStore();
 import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
+import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
 const echartsTest = ref();
 let questionTotal = ref(0 as any);
@@ -99,8 +101,7 @@ let dataList = ref([
 	{
 		value: 30,
 		show: true,
-		name: "未整改安全问题",
+		name: "重大隐患",
-
 		itemStyle: {
 			normal: {
 				color: "#EC6266",
@@ -111,7 +112,7 @@ let dataList = ref([
 	{
 		value: 70,
 		show: true,
-		name: "已整改安全问题",
+		name: "一般隐患",
 		itemStyle: {
 			normal: {
 				color: "#6375C7",
@@ -120,6 +121,7 @@ let dataList = ref([
 		}
 	}
 ]);
+
 function Pie() {
 	let dataArr = [];
 	for (var i = 0; i < 150; i++) {
@@ -160,7 +162,7 @@ function drawEchart() {
 		},
 		title: {
 			text: questionTotal.value,
-			subtext: "安全问题数",
+			subtext: "超期未整改数",
 			x: "24%",
 			y: "center",
 			textAlign: "center",
@@ -183,8 +185,8 @@ function drawEchart() {
 			icon: "rect",
 			type: "plain",
 			orient: "vertical",
-			left: "50%",
+			left: "55%",
-			top: "40%",
+			top: "35%",
 			align: "left",
 			itemGap: 30,
 			itemWidth: 8, // 设置宽度
@@ -364,53 +366,13 @@ function drawEchart() {
 			}
 		]
 	};
-// 	let option = {
-//   tooltip: {
-//     trigger: 'item'
-//   },
-//   legend: {
-//     top: '5%',
-//     left: 'center'
-//   },
-//   series: [
-//     {
-//       name: 'Access From',
-//       type: 'pie',
-//       radius: ['40%', '70%'],
-//       avoidLabelOverlap: false,
-//       label: {
-//         show: false,
-//         position: 'center'
-//       },
-//       emphasis: {
-//         label: {
-//           show: true,
-//           fontSize: 40,
-//           fontWeight: 'bold'
-//         }
-//       },
-//       labelLine: {
-//         show: false
-//       },
-//       data: [
-//         { value: 1048, name: 'Search Engine' },
-//         { value: 735, name: 'Direct' },
-//         { value: 580, name: 'Email' },
-//         { value: 484, name: 'Union Ads' },
-//         { value: 300, name: 'Video Ads' }
-//       ]
-//     }
-//   ]
-// };
 	echartsTest.value.setOption(option, true);
 	window.addEventListener("resize", () => {
 		console.log(echartsTest)
 		echartsTest.value.resize();
 	})
 }
-
 //获取安全管理
-// const safeData = ref(null as any);
 const getSafeInfo = async () => {
 	const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
 	// console.log("获取安全管理", res);
@@ -420,12 +382,269 @@ const getSafeInfo = async () => {
 	questionTotal.value = res.result.totalNum;
 	drawEchart();
 };
+
+let dataList2 = ref([
+	{
+		value: 30,
+		show: true,
+		name: "重大隐患",
+		itemStyle: {
+			normal: {
+				color: "#038cf5",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 70,
+		show: true,
+		name: "一般隐患",
+		itemStyle: {
+			normal: {
+				color: "#01d6f4",
+				borderWidth: 20
+			}
+		}
+	},
+]);
+
+function drawEchart2() {
+	let echartsTest = echarts.init(document.getElementById("echarts2"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			text: questionTotal.value,
+			// text: '100%',
+			subtext: "入场三级教育\n完成率",
+			x: "24%",
+			y: "center",
+			textAlign: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 26,
+				fontWeight: "normal",
+				// align: "center",
+				// width: "200px",
+				fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal"
+				// align: "center",
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			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: dataList2.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				if (dataList2.value && dataList2.value.length) {
+					for (var i = 0; i < dataList2.value.length; i++) {
+						if (data === dataList2.value[i].name) {
+							var value = dataList2.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: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										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: dataList2.value
+			},
+			{
+				type: "pie",
+				radius: ["57", "60"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+	// window.addEventListener("resize", () => {
+	// 	console.log(666)
+	// 	echartsTest.resize();
+	// })
+}
+//获取质量管理
+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;
+	drawEchart2();
+};
+
 //将方法暴露给父组件
 defineExpose({
 	getSafeInfo
 })
 onMounted(async () => {
 	await getSafeInfo();
+	await qualityInfo();
 	// window.onresize = function(){
 	// 	if(echartsTest.value){
 	// 		echartsTest.value.resize();

src/views/commandScreen/commandCenter/rightPage/rightTop.vue

@@ -1,22 +1,134 @@
 <template>
 	<div class="rightTop">
-		
+		<div class="ctHead">
+			<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
+		</div>
+		<div class="ctContent">
+			<div id="echartsSafe" style="width: 100%; height: 100%"></div>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
-import { ref, onMounted, watch } from "vue";
+import rightTop from "@/views/commandScreen/commandCenter/rightPage/rightTop.vue";
-import { getStageOption } from "@/api/modules/projectOverview";
+// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
-import type { TabsPaneContext } from 'element-plus'
+const store = GlobalStore();
+import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
+import * as echarts from "echarts";
+const echartsTest = ref();
+let questionTotal = ref(0 as any);
+
+let dateRange = ref([] as any);
+
+let majorDangerCount = ref(20 as any);
+let majorDangerRate = ref(50 as any);
+let overdueMajorDangerCount = ref(20 as any);
+let overdueMajorDangerRate = ref(50 as any);
+
+let listData = ref([
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+	{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
+	{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
+])
+
+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
+			}
+		}
+	}
+]);
+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;
+}
 
 
-onMounted( async () => {
+
-	
+//获取安全管理
+// const safeData = ref(null as any);
+const getSafeInfo = async () => {
+	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;
+	drawEchart();
+};
+//将方法暴露给父组件
+defineExpose({
+	getSafeInfo
 })
+onMounted(async () => {
+	await getSafeInfo();
+});
 </script>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .rightTop {
 	margin-top: 10px;
 	width: 100%;