Merge branch 'yjl_dev' into 'shenzhen-dev'

安全管理页面样式布局提交

See merge request !13

src/components/card.vue

@@ -43,7 +43,6 @@ export default {
 		}
 		.titltText {
 			margin: 0% 0 1% 2%;
-			// margin-left: 2%;
 		}
 	}
 	.content {

src/views/sevenLargeScreen/headNoise/rightCenter.vue

@@ -493,12 +493,12 @@ onMounted(async () => {
 }
 .styleImg {
 	left: 75%;
-	top: 45%;
+	top: 52%;
 	width: 10%;
 	position: absolute;
-	height: 20%;
+	height: 18%;
 	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
-	background-size: cover;
+	background-size: 100% 100%;
 }
 
 </style>

src/views/sevenLargeScreen/laborManagement/rightBottom.vue

@@ -9,16 +9,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import { getComapnyWorkTotalListApi } from "@/api/modules/labor";
 import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 let checked = ref(1);
-const labelimg = ref(new URL("@/assets/images/larborManagement/greenX.png", import.meta.url).href);
-const labelimg2 = ref(new URL("@/assets/images/larborManagement/orangeX.png", import.meta.url).href);
-
 function draw(xData: any, yData: any) {
 	let chartDom = document.getElementById("echartsBottom");
 	if (chartDom) {

src/views/sevenLargeScreen/safetyManagement/securityManagement/centerBottom.vue

@@ -1,19 +1,168 @@
 <template>
-  <Card title="责任区域分析">
-   <div class="centerBottom">
-     111
-   </div>
- </Card>
- </template>
+	<Card title="责任区域分析">
+		<div class="centerBottom">
+			<div id="echartsCenterBottom" style="width: 100%; height: 100%"></div>
+		</div>
+	</Card>
+</template>
 
- <script setup lang="ts">
- import Card from "@/components/card.vue";
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+function draw() {
+	let chartDom = document.getElementById("echartsCenterBottom");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let echartsTest = echarts.init(document.getElementById("echartsCenterBottom"));
+	let option = {
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				// 坐标轴指示器，坐标轴触发有效
+				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+			},
+			borderRadius: 5,
+			borderWidth: 5,
+			formatter: function (params) {
+				let dot =
+					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
+				return params[0].name + "<br>" + params[0].value;
+			}
+		},
+		grid: {
+			left: "4%",
+			right: "4%",
+			bottom: "5%",
+			top: "15%",
+			containLabel: true
+		},
+		xAxis: {
+			show: true,
+	data: ['责任区域','责任区域','责任区域','责任区域','责任区域','责任区域','责任区域'],
+  			triggerEvent: true,
+			axisTick: {
+				show: false,
+				lineStyle: {
+					color: "red"
+				}
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisLabel: {
+				show: true,
+				rotate: 0,
+				interval: 0,
+				textStyle: {
+					padding: [0, 0, 0, 0],
+					fontSize: 12,
+					color: "#fff"
+				}
+			}
+		},
+		yAxis: {
+			name: "隐患数",
+			triggerEvent: true,
+			nameTextStyle: {
+				color: "#fff",
+				fontSize: 10,
+				padding: [0, 0, 10, 0]
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisLabel: {
+				show: true,
+				textStyle: {
+					color: "#fff",
+					fontSize: 12
+				}
+			}
+		},
+		// color: ["#e54035"],
+		series: [
+			{
+				name: "数量",
+				barMinHeight: 10,
+				type: "pictorialBar",
+				barCategoryGap: "5%",
+				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+				itemStyle: {
+					normal: {
+						//barBorderRadius: 5,
+						//渐变色
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: "#071b34"
+							},
+							{
+								offset: 0.5,
+								color: "#7bf0e1"
+							},
+							{
+								offset: 1,
+								color: "#3a787f"
+							}
+						])
+					}
+				},
+				label: {
+					normal: {
+						show: true,
+						position: "top",
+						textStyle: {
+							color: "#fff",
+							fontSize: 12
+						}
+					}
+				},
+				data: [100,200,300,100,20,60,120],
+				z: 10
+			},
+			{
+				name: "hill",
+				type: "bar",
+				barWidth: "60%",
+				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+				itemStyle: {
+					normal: {
+						color: "rgba(11,47,68,.8)"
+					}
+				},
+				// data: 200,
+				z: 9
+			}
+		]
+	};
+	echartsTest.setOption(option);
+}
+onMounted(() => {
+	draw();
+});
+</script>
 
- </script>
- 
- <style scoped lang="scss">
- .centerBottom{
-   width: 100%;
-   height: 100%;
- }
- </style>
+<style scoped lang="scss">
+.centerBottom {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue

@@ -1,19 +1,135 @@
 <template>
-  <Card title="安全隐患统计">
-   <div class="centerTopBox">
-     111
-   </div>
- </Card>
- </template>
+	<Card title="安全隐患统计">
+		<div class="centerTopBox">
+			<div class="line"></div>
+			<div class="lineDate1 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg9.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>已整改数</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="lineDate2 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg6.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>累积通过</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="lineDate3 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg7.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>未经改数</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="lineDate4 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg10.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>隐患总数</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="lineDate5 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg8.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>已逾期数</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="lineDate6 data">
+				<div class="img">
+					<img src="@/assets/images/securityManagement/safeImg5.png" alt="" />
+				</div>
+				<div class="num">
+					<div class="text"><i>累计闭合</i></div>
+					<div class="numStyle"><i>1024</i></div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
  
  <script setup lang="ts">
- import Card from "@/components/card.vue";
- 
- </script>
+import Card from "@/components/card.vue";
+</script>
  
  <style scoped lang="scss">
- .centerTopBox{
-   width: 100%;
-   height: 100%;
- }
- </style>
+.centerTopBox {
+	width: 100%;
+	height: 100%;
+	background: url("@/assets/images/securityManagement/safeImg1.png") no-repeat;
+	background-size: 100% 100%;
+	position: relative;
+	.line {
+		width: 100%;
+		height: 100%;
+		width: 80%;
+		height: 85%;
+		left: 10%;
+		background: url("@/assets/images/securityManagement/safeImg2.png") no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+	.data {
+		color: #fff;
+		display: flex;
+		width: 25%;
+		height: 20%;
+		position: absolute;
+	}
+	img {
+		width: 50%;
+	}
+	.num {
+		width: 50%;
+		margin-left: -25%;
+		.text {
+			font-size: 14px;
+			background: url("@/assets/images/securityManagement/safeImg3.png") no-repeat;
+			background-size: 100% 100%;
+		}
+		.numStyle {
+			font-size: 20px;
+			font-weight: bold;
+			margin-top: 15%;
+			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+  .lineDate1 {
+		left: 5%;
+		top: 10%;
+	}
+  .lineDate2 {
+		left: 2%;
+		top: 45%;
+	}
+  .lineDate3 {
+		left: 5%;
+		top: 80%;
+	}
+  .lineDate4 {
+		left: 71%;
+		top: 10%;
+	}
+  .lineDate5 {
+		left: 75%;
+		top: 45%;
+	}
+  .lineDate6 {
+		left: 71%;
+		top: 80%;
+	}
+}
+</style>

src/views/sevenLargeScreen/safetyManagement/securityManagement/leftBottom.vue

@@ -1,19 +1,403 @@
 <template>
-  <Card title="隐患等级分析">
-   <div class="leftBottomBox">
-     111
-   </div>
- </Card>
- </template>
+	<Card title="隐患等级分析">
+		<div class="leftBottomBox">
+			<div class="rightHeader">
+				<div class="day" :class="airType == 1 ? 'active' : ''" @click="airType = 1">近7天</div>
+				<div class="year" :class="airType == 2 ? 'active' : ''" @click="airType = 2">近30天</div>
+				<div class="time">
+					<el-date-picker
+						v-model="rangeTime"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						value-format="YYYY-MM-DD"
+						:clearable="false"
+					/>
+				</div>
+			</div>
+			<div class="styleImg"></div>
+			<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
+		</div>
+	</Card>
+</template>
 
- <script setup lang="ts">
- import Card from "@/components/card.vue";
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+const airType = ref(1);
+let rangeTime = ref("" as any);
+let dataList = ref([
+	{
+		value: 75,
+		show: true,
+		name: "一般隐患",
 
- </script>
+		itemStyle: {
+			normal: {
+				color: "#4bc3f9",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 63,
+		show: true,
+		name: "严重隐患",
+		itemStyle: {
+			normal: {
+				color: "#ec6266",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 30,
+		show: true,
+		name: "重大隐患",
+		itemStyle: {
+			normal: {
+				color: "#eeaa59"
+			}
+		}
+	},
+	{
+		value: 30,
+		show: true,
+		name: "底线问题",
+		itemStyle: {
+			normal: {
+				color: "#81f279"
+			}
+		}
+	}
+]);
+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;
+}
 
- <style scoped lang="scss">
- .leftBottomBox{
-   width: 100%;
-   height: 100%;
- }
- </style>
+onMounted(() => {
+	drawEchart();
+});
+
+function drawEchart() {
+	let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			text: 18,
+			subtext: "问题总数",
+			x: "18%",
+			y: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 30,
+				fontWeight: "normal",
+				align: "center",
+				width: "200px",
+        fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 14,
+				fontWeight: "normal",
+				align: "center",
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "50%",
+			top: "30%",
+			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 + "            " + percentage + "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "65%",
+				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: "#52bef0"
+									},
+									{
+										offset: 1,
+										color: "rgba(54, 128, 174,0.4)"
+									}
+								])
+							],
+							[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: "56%",
+				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: [80, 90],
+				center: ["25%", "55%"],
+				hoverAnimation: true,
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["70", "75"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
+</script>
+
+<style lang="scss" scoped>
+.leftBottomBox {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.num {
+	width: 66px;
+	text-align: center;
+	font-family: sadigitalNumber;
+	font-size: calc(100vw * 24 / 1920);
+	color: #fff;
+	position: absolute;
+	top: 45%;
+	left: 18%;
+	z-index: 9;
+}
+// .styleImg {
+// 	left: 6%;
+// 	top: 17%;
+// 	width: 40%;
+// 	position: absolute;
+// 	height: 60%;
+// 	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
+// 	background-size: cover;
+// }
+.rightHeader {
+	width: 65%;
+	display: flex;
+	position: absolute;
+	z-index: 99;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 2.5vh;
+	left: 34%;
+	top: 23%;
+	.Selected {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		height: 5%;
+		width: 15%;
+		margin-right: 5%;
+		z-index: 99;
+		margin-top: -17%;
+		cursor: pointer;
+	}
+	.year {
+		height: 5%;
+		width: 15%;
+		margin-right: 8%;
+		z-index: 99;
+		margin-top: -17%;
+		cursor: pointer;
+	}
+	.active {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+.time {
+	position: absolute;
+	z-index: 999;
+	left: 37%;
+	margin-top: -18%;
+}
+::v-deep .el-input__wrapper {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+::v-deep .el-range-separator {
+	color: #ccc;
+	font-size: 10px;
+}
+::v-deep .el-range-input {
+	color: #ccc;
+	font-size: 10px;
+}
+</style>

src/views/sevenLargeScreen/safetyManagement/securityManagement/leftTop.vue

@@ -1,19 +1,168 @@
 <template>
- <Card title="责任单位分析">
-  <div class="leftBox">
-    111
-  </div>
-</Card>
+	<Card title="责任单位分析">
+		<div class="leftBox">
+			<div id="echartsLeftBottom" style="width: 100%; height: 100%"></div>
+		</div>
+	</Card>
 </template>
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
-
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+function draw() {
+	let chartDom = document.getElementById("echartsLeftBottom");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let echartsTest = echarts.init(document.getElementById("echartsLeftBottom"));
+	let option = {
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				// 坐标轴指示器，坐标轴触发有效
+				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+			},
+			borderRadius: 5,
+			borderWidth: 5,
+			formatter: function (params) {
+				let dot =
+					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
+				return params[0].name + "<br>" + params[0].value;
+			}
+		},
+		grid: {
+			left: "4%",
+			right: "4%",
+			bottom: "5%",
+			top: "15%",
+			containLabel: true
+		},
+		xAxis: {
+			show: true,
+	data: ['责任单位','责任单位','责任单位','责任单位','责任单位','责任单位','责任单位'],
+  			triggerEvent: true,
+			axisTick: {
+				show: false,
+				lineStyle: {
+					color: "red"
+				}
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisLabel: {
+				show: true,
+				rotate: 0,
+				interval: 0,
+				textStyle: {
+					padding: [0, 0, 0, 0],
+					fontSize: 12,
+					color: "#fff"
+				}
+			}
+		},
+		yAxis: {
+			name: "隐患数",
+			triggerEvent: true,
+			nameTextStyle: {
+				color: "#fff",
+				fontSize: 10,
+				padding: [0, 0, 10, 0]
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#193c81"
+				}
+			},
+			axisLabel: {
+				show: true,
+				textStyle: {
+					color: "#fff",
+					fontSize: 12
+				}
+			}
+		},
+		// color: ["#e54035"],
+		series: [
+			{
+				name: "数量",
+				barMinHeight: 10,
+				type: "pictorialBar",
+				barCategoryGap: "5%",
+				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+				itemStyle: {
+					normal: {
+						//barBorderRadius: 5,
+						//渐变色
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: "#071b34"
+							},
+							{
+								offset: 0.5,
+								color: "#7bf0e1"
+							},
+							{
+								offset: 1,
+								color: "#3a787f"
+							}
+						])
+					}
+				},
+				label: {
+					normal: {
+						show: true,
+						position: "top",
+						textStyle: {
+							color: "#fff",
+							fontSize: 12
+						}
+					}
+				},
+				data: [100,200,300,100,20,60,120],
+				z: 10
+			},
+			{
+				name: "hill",
+				type: "bar",
+				barWidth: "60%",
+				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+				itemStyle: {
+					normal: {
+						color: "rgba(11,47,68,.8)"
+					}
+				},
+				// data: 200,
+				z: 9
+			}
+		]
+	};
+	echartsTest.setOption(option);
+}
+onMounted(() => {
+	draw();
+});
 </script>
 
 <style scoped lang="scss">
-.leftBox{
-  width: 100%;
-  height: 100%;
+.leftBox {
+	width: 100%;
+	height: 100%;
 }
 </style>

src/views/sevenLargeScreen/safetyManagement/securityManagement/rightBox.vue

@@ -1,17 +1,105 @@
 <template>
 	<div class="rightBigBox">
-		<Card title="安全管理记录"> 111 </Card>
+		<Card title="安全管理记录">
+			<div class="rightHeader">
+				<div class="tab" :class="{ active: airType === 1 }">安全检查</div>
+				<div class="tab" :class="{ active: airType === 2 }">安全整改</div>
+				<div class="tab" :class="{ active: airType === 3 }">随手拍</div>
+			</div>
+			<div class="menuD">
+				<el-scrollbar style="height: 100%">
+				<div class="menuL" v-for="item in 10">
+					<div class="leftNum">
+						<div class="name" style="font-size: 18px">测试</div>
+						<div class="name">整改结果：<span style="color: #e25f64">已逾期</span></div>
+						<div class="name">编号：ZLJC20230608001</div>
+					</div>
+					<div class="rightDate">
+						<div class="date">
+							检查结果：<span>通过<span style="color: #6dc86f; margin-left: 2%">1</span></span>
+							<span style="margin-left: 10%">整改 <span style="color: #da9d56; margin-left: 2%">2</span></span>
+						</div>
+						<div class="date">发起日期：2023.06.08</div>
+					</div>
+				</div>
+				</el-scrollbar>
+			</div>
+		</Card>
 	</div>
 </template>
  
  <script setup lang="ts">
 import Card from "@/components/card.vue";
+import { ref } from "vue";
+let airType = ref(1);
 </script>
  
  <style scoped lang="scss">
 .rightBigBox {
 	width: 100%;
 	height: 100%;
+	.rightHeader {
+		width: 40%;
+		display: flex;
+		z-index: 99;
+		color: #fff;
+		font-size: 10px;
+		text-align: center;
+		line-height: 25px;
+		cursor: pointer;
+		margin-left: 60%;
+		height: 5%;
+
+		.tab {
+			width: 80%;
+			margin-right: 8%;
+			z-index: 99;
+			background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+			background-size: 100% 100%;
+			margin-top: 10%;
+			height: 60%;
+		}
+	}
+	.menuD {
+		width: 92%;
+		height: 90%;
+		margin: 2% 5% 0 5%;
+		font-size: 14px;
+		.menuL {
+			width: 100%;
+			height: 15%;
+			background: url("@/assets/images/securityManagement/menImg.png") no-repeat;
+			background-size: 100% 100%;
+			margin-top: 4%;
+			display: flex;
+			.leftNum {
+				width: 40%;
+				height: 90%;
+				text-align: left;
+				color: #fff;
+				margin: 2% 0 0 4%;
+				padding-bottom: 2%;
+				.name {
+					margin-top: 4%;
+				}
+			}
+			.rightDate {
+				width: 40%;
+				height: 90%;
+				text-align: left;
+				color: #fff;
+				margin: 8% 0 0 8%;
+				.date {
+					margin-top: 4%;
+				}
+			}
+		}
+	}
+}
+.active {
+	height: 60%;
+	background: url("@/assets/images/dustNoise/rightImg.png") no-repeat !important;
+	background-size: 100% 100% !important;
 }
 
 ::v-deep .h-card .content {

src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue

@@ -52,10 +52,6 @@ import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 const airType = ref(1);
 
-// let timer = ref(null);
-// //角度，用来做简单的动画效果的
-// let angle = ref(0);
-// let value = ref(55.33);
 let trafficWay = ref([
 	{
 		name: "回转限位",