From 9617a78233b8b325440c315d2e7c6b3c6bf55c09 Mon Sep 17 00:00:00 2001
From: Vce <daisy_vce@yeah.net>
Date: Sun, 2 Jun 2024 22:08:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8C=87=E6=8C=A5=E9=83=A8?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |    4 +-
 src/assets/images/commandScreen/number-bg.png |  Bin 0 -> 1260 bytes
 src/routers/modules/staticRouter.ts           |    4 +-
 .../commandCenter/centerBottom.vue            |    2 +-
 .../commandCenter/leftBottom(旧版2).vue       |  794 ++++++++++++
 .../commandCenter/leftBottom.vue              | 1087 ++++++-----------
 6 files changed, 1200 insertions(+), 691 deletions(-)
 create mode 100644 src/assets/images/commandScreen/number-bg.png
 create mode 100644 src/views/commandScreen/commandCenter/leftBottom(旧版2).vue

diff --git a/.env.development b/.env.development
index c77c6ea..a2acb68 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ NODE_ENV = 'development'
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.221:19111'
 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
-# VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
+VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:100'
@@ -24,7 +24,7 @@ NODE_ENV = 'development'
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
-VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
+# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信
 # VITE_API_URL = 'http://101.43.164.214:11111'
diff --git a/src/assets/images/commandScreen/number-bg.png b/src/assets/images/commandScreen/number-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..15e8131c895800e7642ecf921c6397479c00efaf
GIT binary patch
literal 1260
zcmV<I1QYv-P)<h;3K|Lk000e1NJLTq001-q002M;1^@s6Rm)U700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1c6CJK~#7F)mu+%
z6fqP}*4kC<tU_C?)^2+#g@Sq!ycBv7M5=<9*1O;*@mqNC?Ad|{Jt%rm@K7o!Uc?rQ
zwF=s9+5Vv#H#;*snN0q?ykw^OD`j>vFM03f<-O!(GIZ+hb4DcWx7L2|Z+|Y7|4XPh
zCTKls9+S)a<bs`zHy^jxmc9`q7$t<V;%^fjv^^6IM@+Y~{*pwavqRD7%(O_AQ|Mr4
z?eVWqPZx<ZQ>fsc^(bMTKbqcdtuB#{m2UPonhR-JPa&>Mdt>Fn;N<OgmlZptl=d-x
z?X}mr?}?I>i!{35IhiCHu`O5d`t8k?W!^FUjq&-OLap^z@3&T;Ee=lJX`ecGWtSlE
z=WvhK`c9PQce?f&drdb#JbH3w{Kn;hk*iZR9spYFFMbeDsF-mf_&*5%U1z0M=6=t0
zsg)VcxDX+%X6lsQaP9aP*QJ&e(=3X(H(EA8ostBLT2?}t$vMmPkB~?dibJOu#Zo{m
zbCeboQL_?QER!lyg#{s<CioBzSVb@vh42!F9IJH5lokDQL4gE@ixsdIll@*$D7=NB
zR)DTDR7%T{8638u3@`}khq)-H3frLs386gaC$^*F?-b>9LP5%9=2!*woyg>sf*P_=
zN;4-+<YzkOsn3L+jN_n|Q%L1QvQXkZQ~{Ybr7L4H&P6%Vhd{G3PyrjQiXIDLVx?M3
zhzv!>CLy58LKFef^Yokmd`K2h6g0$;feb$o&wTpe7v)@`%Wg>k<kAO>ATngZpn`^)
z)4)Rx3R6^c0n|SYYdQ0FQWXiDZXyQlDWvt1;@m!&3YeaD?F1bU6K{=$@Tmhfbo;a`
z!eAj>`cT${>Ao~#Zo57yLJcEGdvFV9d*sgPL+JHa@b=<M`1HG4Wb)^t9QG}MFG5ZU
z&O=Vc+*cr7K80#4zQo&D5DO{O-axB?5Ls<5%DL_-K;YBsm_@AjJcJQSd=_pR$jw8=
z1kZ$!eq^$OTbsFgsAwV6+czISG6^Yf{JZ(4!a`zDFui>X<rl8|4rW*^1Qp5$CGPsf
z777vN%E+7K;g8B#T?LcJzv>wl^6)oCPE#WU2;19(GKN+PO@bHukjq+5l`i{O0vD>a
z37*=Apt*`^xIuvn)rxk+n}W8Ed({|(4kFsUZEHoKvbN{gH+MxSQgHW1)UXNZYEc+{
zAqCF|1s@Aw;MZohFhHdbrl=NjkqSq)xYk+-`+lhGGjlc?tq-{hR>fAaEf?z2h{f1F
z1v9g%z}(*tbt@dP;OY)l`cRn+!_~J=2_ztFi&O}_>+=)pF56f#OpDYi0)+^!ON}45
zZ#1u+#U^;B&|Rg!MHgm=xGvpu+x)!q@lzwWc7MKGCSTuLE2oFlvCpA(<T4e_!QSS{
z;puyG^=Pd7$w2R9eLWhV@5F8PedXbz{@Vsdv%`YoRV!vP<iz^oy-b%r)3sl`AHH;d
zu0AkU{8XT;)If9L^u+axtuOuu)9uQtXrUbygS$#c<|(nP@O4UberCEqYW}yM+x!KB
WB`BVL0rF=60000<MNUMnLSTY@xlOSE

literal 0
HcmV?d00001

diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 09a23d5..d09e333 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
 			{
diff --git a/src/views/commandScreen/commandCenter/centerBottom.vue b/src/views/commandScreen/commandCenter/centerBottom.vue
index 7aff41c..98dc14a 100644
--- a/src/views/commandScreen/commandCenter/centerBottom.vue
+++ b/src/views/commandScreen/commandCenter/centerBottom.vue
@@ -218,7 +218,7 @@ onMounted(async () => {
 		width: 100%;
 		height: calc(100% - 40px);
 		overflow: hidden;
-
+		
 		// background: #fff;
 		.item {
 			width: 100%;
diff --git a/src/views/commandScreen/commandCenter/leftBottom(旧版2).vue b/src/views/commandScreen/commandCenter/leftBottom(旧版2).vue
new file mode 100644
index 0000000..9b83de3
--- /dev/null
+++ b/src/views/commandScreen/commandCenter/leftBottom(旧版2).vue
@@ -0,0 +1,794 @@
+<template>
+	<div class="leftBottom">
+		<div class="header">
+			<div class="hLeft">安全教育智能分析</div>
+			<div class="hRight"></div>
+		</div>
+		<div class="content">
+			<div class="contentTop">
+				<div id="echartsEdu" style="width: 100%; height: 100%"></div>
+				<div class="notoDta" v-if="dataList2.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+			<div class="centerBottom">
+				<div class="leftTop">
+					<div class="header">
+						<div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
+						<div class="hRight">
+							<el-date-picker style="width: 85%" v-model="dateRange" type="daterange"
+								value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
+								end-placeholder="结束日期" @change="dateChange" />
+						</div>
+					</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="second"></el-tab-pane>
+							<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
+						</el-tabs>
+						<div class="tabList">
+							<div>排名</div>
+							<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</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>
+						<div class="listBox">
+							<el-scrollbar height="150">
+								<div v-for="(item, index) in tabList" :key="index" class="listStyle">
+									<div>{{ index + 1 }}</div>
+									<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.workerName }}</div>
+									<div v-if="activeIndex === '2'" :title="item.enterpriseName">{{ item.enterpriseName
+										}}</div>
+									<div v-if="activeIndex === '0' || activeIndex === '2'">{{ item.rectifiedNum }}</div>
+									<div v-if="activeIndex === '1'">{{ item.createDangerNum }}</div>
+									<div>{{ item.rectifiedNumRatio }}</div>
+									<div>{{ item.rectifiedNumRatioTimely }}</div>
+								</div>
+							</el-scrollbar>
+							<div class="notoDta" v-if="tabList.length == 0">
+								<img src="@/assets/images/noData.png" alt="" />
+								<p>暂无数据</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
+import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
+import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
+import type { TabsPaneContext, ElMessageBox } from "element-plus";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+const emits = defineEmits(["openDialog"]);
+const activeName = ref("first");
+const activeIndex = ref("0" as any);
+const dateRange = ref([]);
+const tabList = ref([] as any);
+const inspectTabList = ref([] as any);
+let listData = ref([
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
+	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" }
+]);
+
+let dataList2 = ref([
+	{
+		value: 0,
+		show: true,
+		name: "未教育人员",
+		// 设置文本颜色
+		// textStyle: {
+		// 	color: '#038cf5'
+		// },
+		itemStyle: {
+			normal: {
+				color: "#038cf5",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 0,
+		show: true,
+		name: "完成人员",
+		// 设置文本颜色
+		// textStyle: {
+		// 	color: '#01d6f4'
+		// }
+		itemStyle: {
+			normal: {
+				color: "#01d6f4",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 0,
+		show: true,
+		name: "现场人员",
+		itemStyle: {
+			normal: {
+				color: "#03e9f6",
+				borderWidth: 20
+			}
+		}
+	}
+]);
+// 打开弹窗
+const openDialogData = (obj: any) => {
+	emits("openDialog", obj);
+};
+const dateChange = () => {
+	if (activeIndex.value == "0") {
+		getMemberJobStatusFn();
+	} else if (activeIndex.value == "1") {
+		getInspectManStatusFn();
+	} else if (activeIndex.value == "2") {
+		getEnterpriseStatusFn();
+	}
+}
+//获取人员数据
+const getPersonList = async () => {
+	const res: any = await getPersonTypeAndEduStatisticsApi({
+		projectSn: store.sn
+	});
+	if (res.result) {
+		dataList2.value[1].value = res.result.personType.toaltPerson.totalPerson;
+		dataList2.value[2].value = res.result.personType.toaltPerson.totalPerson;
+		console.log("安全教育智能分析666", res);
+		drawEchart2();
+	}
+};
+// 获取人员履职情况分析数据--整改人
+const getMemberJobStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getMemberJobStatusApi(requestData);
+	console.log("人员履职情况res--整改人", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+// 获取人员履职情况分析数据--检查人
+const getInspectManStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getInspectManStatusApi(requestData);
+	console.log("人员履职情况res--检查人", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+// 获取人员履职情况分析数据--按分包单位分析
+const getEnterpriseStatusFn = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		pageSize: 5,
+		pageNo: 1
+	};
+	if (dateRange.value && dateRange.value.length > 0) {
+		requestData.inspectTime_begin = dateRange.value[0];
+		requestData.inspectTime_end = dateRange.value[1];
+	}
+	const res: any = await getEnterpriseStatusApi(requestData);
+	console.log("人员履职情况res--按分包单位分析", res);
+	if (res.result) {
+		tabList.value = res.result.records;
+	} else {
+		tabList.value = [];
+	}
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+	activeIndex.value = tab.index;
+	console.log(tab);
+	if (tab.index == "0") {
+		getMemberJobStatusFn();
+	} else if (tab.index == "1") {
+		getInspectManStatusFn();
+	} else if (tab.index == "2") {
+		getEnterpriseStatusFn();
+	}
+	console.log("activeIndex", activeIndex.value);
+};
+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 drawEchart2() {
+	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			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: "28%",
+			align: "left",
+			itemGap: 30,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				// color: "#000",
+				rich: {
+					name: {
+						verticalAlign: "right",
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					},
+					value1: {
+						align: "left",
+						fontSize: 14,
+						color: "#FBDC00",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					},
+					value2: {
+						align: "left",
+						fontSize: 14,
+						color: "#0DAF27",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					},
+					value3: {
+						align: "left",
+						fontSize: 14,
+						color: "#047EFF",
+						fontFamily: "Source Han Sans CN, Source Han Sans CN",
+						fontWeight: "bold"
+					}
+				}
+			},
+			data: dataList2.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				console.log(data, 666777);
+				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 + "%";
+							console.log(value, 888);
+							if (data == "未教育人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value1|" + value + " " + "}";
+							} else if (data == "完成人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value2|" + value + " " + "}";
+							} else if (data == "现场人员") {
+								return "{name| " + data + "}  {gap|       }" + "{value3|" + 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();
+	// })
+}
+onMounted(async () => {
+	getMemberJobStatusFn();
+	getPersonList();
+});
+</script>
+
+<style lang="scss" scoped>
+.leftBottom {
+	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
+	background-size: 100% 100%;
+	height: 100%;
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		padding: 20px 20px;
+		border-top: none;
+		border-left: none;
+		border-right: none;
+		border-bottom: 1px solid #0059ff;
+
+		// height: 10%;
+		.hLeft {
+			width: 50%;
+			font-size: 20px;
+			font-weight: bold;
+			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
+			-webkit-background-clip: text;
+			background-clip: text;
+			color: transparent;
+		}
+
+		.hRight {
+			width: 50%;
+		}
+	}
+
+	.content {
+		height: 90%;
+
+		// background-color: #fff;
+		.contentTop {
+			height: 40%;
+		}
+
+		.centerBottom {
+			// width: 100%;
+			height: 60%;
+			// background-color: #fff;
+			position: relative;
+
+			.leftTop {
+				width: 100%;
+				height: 35%;
+
+				.header {
+					// width: 100%;
+					// height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 20px 20px;
+					border-bottom: 1px solid #0059ff;
+
+					.hLeft {
+						width: 50%;
+						font-size: 20px;
+						font-weight: bold;
+						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
+						-webkit-background-clip: text;
+						background-clip: text;
+						color: transparent;
+					}
+
+					.hRight {
+						width: 50%;
+					}
+				}
+
+				.content {
+					padding: 0 20px;
+
+					::v-deep .el-tabs__item {
+						color: #fff;
+					}
+
+					::v-deep .el-tabs__nav-wrap::after {
+						background-color: rgba(255, 0, 0, 0);
+					}
+
+					.tabList {
+						display: flex;
+						width: 100%;
+						height: 30%;
+						// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
+						background-color: #00224f;
+						background-size: 100% 100%;
+						left: 75.5%;
+						top: 75%;
+						color: #fff;
+						font-size: 14px;
+						line-height: 30px;
+						justify-content: space-around;
+						text-align: center;
+
+						div {
+							width: 100px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+					}
+
+					.listBox {
+
+						// height: 10%;
+						.listStyle {
+							display: flex;
+							justify-content: space-around;
+							color: #fff;
+							height: 12%;
+							line-height: 25px;
+							font-size: 12px;
+							text-align: center;
+
+							div {
+								width: 100px;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+						}
+
+						.listStyle:hover {
+							background: #003c84;
+						}
+					}
+
+					.notoDta {
+						top: 52%;
+						width: 45%;
+						left: 28%;
+						text-align: center;
+						position: absolute;
+
+						img {
+							width: 40%;
+							margin: 5% 30%;
+						}
+
+						p {
+							color: #fff;
+							font-size: 14px;
+							margin: -6% 37%;
+						}
+					}
+				}
+			}
+
+			::v-deep .el-input__inner {
+				color: #fff;
+			}
+
+			::v-deep .el-select .el-input .el-select__caret {
+				color: #fff;
+			}
+
+			::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;
+			}
+
+			.dialogContainer {
+				padding: 0 50px;
+
+				// height: 600px;
+				::v-deep .el-tabs__item {
+					color: #fff;
+				}
+
+				::v-deep .el-tabs__nav-wrap::after {
+					background-color: rgba(255, 0, 0, 0);
+				}
+
+				.tabList {
+					display: flex;
+					width: 100%;
+					height: 14%;
+					background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
+					// background-color: #00224f;
+					background-size: 100% 100%;
+					left: 75.5%;
+					top: 75%;
+					color: #fff;
+					font-size: 14px;
+					line-height: 30px;
+					justify-content: space-around;
+					text-align: center;
+
+					div {
+						width: 100px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+				}
+
+				.listBox {
+
+					// height: 10%;
+					.listStyle {
+						display: flex;
+						justify-content: space-around;
+						color: #fff;
+						height: 12%;
+						line-height: 25px;
+						font-size: 12px;
+						text-align: center;
+
+						div {
+							width: 100px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+					}
+
+					.listStyle:hover {
+						background: #003c84;
+					}
+				}
+
+				.notoDta {
+					top: 40%;
+					width: 30%;
+					left: 35%;
+					text-align: center;
+					position: absolute;
+
+					img {
+						width: 40%;
+						margin: 5% 30%;
+					}
+
+					p {
+						color: #fff;
+						font-size: 14px;
+						margin: -6% 37%;
+					}
+				}
+			}
+
+			::v-deep .el-dialog {
+				background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
+				// background-color: #fff;
+				background-size: 100% 100%;
+				margin-top: 12%;
+			}
+
+			::v-deep .el-dialog__headerbtn {
+				right: 35px;
+				top: 25px;
+			}
+
+			::v-deep .el-dialog .el-dialog__header .el-dialog__title {
+				margin-left: 30px;
+				margin-top: 10px;
+				font-size: 18px;
+				color: #fff;
+				position: absolute;
+			}
+
+			::v-deep el-dialog__header {
+				margin-top: 20px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/commandScreen/commandCenter/leftBottom.vue b/src/views/commandScreen/commandCenter/leftBottom.vue
index 9b83de3..d1a52a8 100644
--- a/src/views/commandScreen/commandCenter/leftBottom.vue
+++ b/src/views/commandScreen/commandCenter/leftBottom.vue
@@ -1,59 +1,66 @@
 <template>
 	<div class="leftBottom">
 		<div class="header">
-			<div class="hLeft">安全教育智能分析</div>
-			<div class="hRight"></div>
+			<div class="hLeft">项目人员考勤</div>
 		</div>
 		<div class="content">
 			<div class="contentTop">
-				<div id="echartsEdu" style="width: 100%; height: 100%"></div>
-				<div class="notoDta" v-if="dataList2.length == 0">
-					<img src="@/assets/images/noData.png" alt="" />
-					<p>暂无数据</p>
+				<div class="line1">
+					<span>出勤人员总数:</span>
+					<div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div>
+					<span style="margin-left:15px">考勤日环比</span>
+					<div class="dayRadio">0.22%</div>
+					<div class="iconCenter"><el-icon size="20" color="#0262c7"><Top/></el-icon></div>
+				</div>
+				<div class="line2">
+					<div :class="['line2Item',activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
+					<div :class="['line2Item',activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
+				</div>
+				<div class="barContent">
+					<div id="bar" style="width:98%;height:100%" ref="bar"></div>
 				</div>
 			</div>
 			<div class="centerBottom">
-				<div class="leftTop">
-					<div class="header">
-						<div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
-						<div class="hRight">
-							<el-date-picker style="width: 85%" v-model="dateRange" type="daterange"
-								value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
-								end-placeholder="结束日期" @change="dateChange" />
-						</div>
-					</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="second"></el-tab-pane>
-							<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
-						</el-tabs>
-						<div class="tabList">
-							<div>排名</div>
-							<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</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>
-						<div class="listBox">
-							<el-scrollbar height="150">
-								<div v-for="(item, index) in tabList" :key="index" class="listStyle">
-									<div>{{ index + 1 }}</div>
-									<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.workerName }}</div>
-									<div v-if="activeIndex === '2'" :title="item.enterpriseName">{{ item.enterpriseName
-										}}</div>
-									<div v-if="activeIndex === '0' || activeIndex === '2'">{{ item.rectifiedNum }}</div>
-									<div v-if="activeIndex === '1'">{{ item.createDangerNum }}</div>
-									<div>{{ item.rectifiedNumRatio }}</div>
-									<div>{{ item.rectifiedNumRatioTimely }}</div>
-								</div>
-							</el-scrollbar>
-							<div class="notoDta" v-if="tabList.length == 0">
-								<img src="@/assets/images/noData.png" alt="" />
-								<p>暂无数据</p>
+				<div class="cbTop">
+					<div class="header"><div class="hLeft">进度情况分析</div></div>
+					<div class="content" style="backgound:black">
+						<div class="cbLine1">
+							<div style="display:flex">
+								<span>项目总进度:</span>
+								<div class="numberCard" v-for="(item,i) in '023'" :key="i">{{item}}</div>
+								<span style="margin-left:5px">%</span>
 							</div>
+							<div style="display:flex">
+								<span style="margin-left:15px">项目剩余天数</span>
+								<div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div>
+								<span style="margin-left:5px">天</span>
+							</div>
+						</div>
+						<div class="cbProcess">
+							<vue3-seamless-scroll 
+							v-if="listData.length>0" :list="listData" 
+							:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
+								<div class="pItem" v-for="(item,i) in listData" :key="i">
+									<div class="pLeft">
+										<span :class="['plInner','plBgc'+(i+1)%12]">
+											<span style="margin-left:10px">Top{{i+1}}</span>
+										</span>
+									</div>
+									<div class="pRight">
+										<div class="prTop">
+											<div class="prtLeft">{{item.a}}</div>
+											<div class="prtRight">{{item.b}}%</div>
+										</div>
+										<div class="prBottom">
+											<div class="processLineBg">
+												<div :class="['processLine','plBtnBgc'+(i+1)%12]" :style="{width:item.b+'%'}">
+													<div class="processLineBtn"></div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</vue3-seamless-scroll>
 						</div>
 					</div>
 				</div>
@@ -69,442 +76,114 @@ import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
 import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
 import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
 import type { TabsPaneContext, ElMessageBox } from "element-plus";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { GlobalStore } from "@/stores";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 const store = GlobalStore();
-const emits = defineEmits(["openDialog"]);
-const activeName = ref("first");
+const activeName = ref("总包出勤情况分析");
 const activeIndex = ref("0" as any);
-const dateRange = ref([]);
-const tabList = ref([] as any);
-const inspectTabList = ref([] as any);
-let listData = ref([
-	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
-	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
-	{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
-	{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" }
-]);
 
-let dataList2 = ref([
-	{
-		value: 0,
-		show: true,
-		name: "未教育人员",
-		// 设置文本颜色
-		// textStyle: {
-		// 	color: '#038cf5'
-		// },
-		itemStyle: {
-			normal: {
-				color: "#038cf5",
-				borderWidth: 20
-			}
-		}
-	},
-	{
-		value: 0,
-		show: true,
-		name: "完成人员",
-		// 设置文本颜色
-		// textStyle: {
-		// 	color: '#01d6f4'
-		// }
-		itemStyle: {
-			normal: {
-				color: "#01d6f4",
-				borderWidth: 20
-			}
-		}
-	},
-	{
-		value: 0,
-		show: true,
-		name: "现场人员",
-		itemStyle: {
-			normal: {
-				color: "#03e9f6",
-				borderWidth: 20
-			}
-		}
-	}
-]);
-// 打开弹窗
-const openDialogData = (obj: any) => {
-	emits("openDialog", obj);
-};
-const dateChange = () => {
-	if (activeIndex.value == "0") {
-		getMemberJobStatusFn();
-	} else if (activeIndex.value == "1") {
-		getInspectManStatusFn();
-	} else if (activeIndex.value == "2") {
-		getEnterpriseStatusFn();
-	}
-}
-//获取人员数据
-const getPersonList = async () => {
-	const res: any = await getPersonTypeAndEduStatisticsApi({
-		projectSn: store.sn
-	});
-	if (res.result) {
-		dataList2.value[1].value = res.result.personType.toaltPerson.totalPerson;
-		dataList2.value[2].value = res.result.personType.toaltPerson.totalPerson;
-		console.log("安全教育智能分析666", res);
-		drawEchart2();
-	}
-};
-// 获取人员履职情况分析数据--整改人
-const getMemberJobStatusFn = async () => {
-	let requestData: any = {
-		projectSn: store.sn,
-		pageSize: 5,
-		pageNo: 1
-	};
-	if (dateRange.value && dateRange.value.length > 0) {
-		requestData.inspectTime_begin = dateRange.value[0];
-		requestData.inspectTime_end = dateRange.value[1];
-	}
-	const res: any = await getMemberJobStatusApi(requestData);
-	console.log("人员履职情况res--整改人", res);
-	if (res.result) {
-		tabList.value = res.result.records;
-	} else {
-		tabList.value = [];
-	}
-};
-// 获取人员履职情况分析数据--检查人
-const getInspectManStatusFn = async () => {
-	let requestData: any = {
-		projectSn: store.sn,
-		pageSize: 5,
-		pageNo: 1
-	};
-	if (dateRange.value && dateRange.value.length > 0) {
-		requestData.inspectTime_begin = dateRange.value[0];
-		requestData.inspectTime_end = dateRange.value[1];
-	}
-	const res: any = await getInspectManStatusApi(requestData);
-	console.log("人员履职情况res--检查人", res);
-	if (res.result) {
-		tabList.value = res.result.records;
-	} else {
-		tabList.value = [];
-	}
-};
-// 获取人员履职情况分析数据--按分包单位分析
-const getEnterpriseStatusFn = async () => {
-	let requestData: any = {
-		projectSn: store.sn,
-		pageSize: 5,
-		pageNo: 1
-	};
-	if (dateRange.value && dateRange.value.length > 0) {
-		requestData.inspectTime_begin = dateRange.value[0];
-		requestData.inspectTime_end = dateRange.value[1];
-	}
-	const res: any = await getEnterpriseStatusApi(requestData);
-	console.log("人员履职情况res--按分包单位分析", res);
-	if (res.result) {
-		tabList.value = res.result.records;
-	} else {
-		tabList.value = [];
-	}
-};
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-	activeIndex.value = tab.index;
-	console.log(tab);
-	if (tab.index == "0") {
-		getMemberJobStatusFn();
-	} else if (tab.index == "1") {
-		getInspectManStatusFn();
-	} else if (tab.index == "2") {
-		getEnterpriseStatusFn();
-	}
-	console.log("activeIndex", activeIndex.value);
-};
-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;
+//切换tab
+const handleTab = (val:string) => {
+	activeIndex.value = val
 }
+//绘画柱状图
+let testData = ref({
+	xData:['中铝山东','岁的法国','哇哇哇哇','强强强强','古典风格','如果火箭','发给你们','气味让人','请问啊是','法国海军'],
+	yData:[120,11,66,33,53,11,77,51,157,90,],
+	hData:[
+		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+		{a:120,b:100,c:'12%',d:'45%'},
+	]
+} as any)
+function drawBar() {
+	console.log("---------------------bar--------")
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById('bar')!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
 
-function drawEchart2() {
-	let echartsTest = echarts.init(document.getElementById("echartsEdu"));
-	let option = {
+	option = {
+		xAxis: {
+			type: 'category',
+			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+			data: testData.value.xData,
+			axisLabel: {
+				fontSize: 8, // 设置字体大小为12px
+			},
+			axisLine: {
+				lineStyle: {
+					color: 'white' // 设置X轴刻度线的颜色为灰色
+				}
+			},
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				fontSize: 8, // 设置字体大小为12px
+			},
+			axisLine: {
+				lineStyle: {
+					color: 'white' // 设置Y轴刻度线的颜色为灰色
+				}
+			},
+			// show:false
+		},
+		grid: {
+			top: "8%", 
+			right: "0",
+			left:"5%",
+			bottom: "12%",
+			
+		},
+		series: [{
+			// data: [120, 200, 150, 80, 70, 110, 130],
+			data: testData.value.yData,
+			type: 'bar',
+			itemStyle: {
+				color: '#3398DB' // 设置柱状图颜色为蓝色
+			},
+			emphasis: {
+				itemStyle: {
+					// color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
+					// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
+					color: '#00008B' // 设置鼠标悬浮时的颜色为深蓝色
+				}
+			}
+		}],
 		tooltip: {
-			trigger: "item"
-		},
-		title: {
-			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",
+			borderColor: 'rgba(50,50,50, 0.5)',
+			backgroundColor: 'rgba(50,50,50, 0.5)', 
+			textStyle: { color: '#fff',fontSize:'13'},
+			formatter: function(params) {
+				console.log(params)
+				return '<div style="font-weight:bold">'+params.name+'</div>' + 
+						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:darkred">●</span>在册人员：'+params.data+'</div>' + 
+						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:yellow">●</span>出勤人员总数：'+params.data+'</div>' +
+						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:darkblue">●</span>出勤率：'+params.data+'%</div>' +
+						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:green">●</span>出勤率日环比：'+params.data+'%</div>';
 			}
-		},
-		legend: {
-			selectedMode: false, // 取消图例上的点击事件
-			icon: "rect",
-			type: "plain",
-			orient: "vertical",
-			left: "55%",
-			top: "28%",
-			align: "left",
-			itemGap: 30,
-			itemWidth: 8, // 设置宽度
-			itemHeight: 7, // 设置高度
-			symbolKeepAspect: false,
-			textStyle: {
-				// color: "#000",
-				rich: {
-					name: {
-						verticalAlign: "right",
-						align: "left",
-						fontSize: 14,
-						color: "#FFFFFF"
-					},
-					value1: {
-						align: "left",
-						fontSize: 14,
-						color: "#FBDC00",
-						fontFamily: "Source Han Sans CN, Source Han Sans CN",
-						fontWeight: "bold"
-					},
-					value2: {
-						align: "left",
-						fontSize: 14,
-						color: "#0DAF27",
-						fontFamily: "Source Han Sans CN, Source Han Sans CN",
-						fontWeight: "bold"
-					},
-					value3: {
-						align: "left",
-						fontSize: 14,
-						color: "#047EFF",
-						fontFamily: "Source Han Sans CN, Source Han Sans CN",
-						fontWeight: "bold"
-					}
-				}
-			},
-			data: dataList2.value.map(item => {
-				if (item.show) {
-					return item.name;
-				}
-			}),
-			formatter: function (data) {
-				console.log(data, 666777);
-				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 + "%";
-							console.log(value, 888);
-							if (data == "未教育人员") {
-								return "{name| " + data + "}  {gap|       }" + "{value1|" + value + " " + "}";
-							} else if (data == "完成人员") {
-								return "{name| " + data + "}  {gap|       }" + "{value2|" + value + " " + "}";
-							} else if (data == "现场人员") {
-								return "{name| " + data + "}  {gap|       }" + "{value3|" + 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();
-	// })
+	// window.addEventListener('resize',function(){
+    //       myChart.resize()
+    //   })
+
+	option && myChart.setOption(option);
 }
+
+//进度数据
+let listData = ref([
+	{a:'新地能源工程技术有限公司',b:'54'},{a:'中冶沈勘秦皇岛工程设计研究总院有限公司',b:'23'},{a:'鞍山电力实业有限公司',b:'49'},{a:'鞍钢矿业资源利用（鞍山）有限公司',b:'35'},
+	{a:'上海建工五建集团有限公司',b:'34'},{a:'辽宁普凡建设有限公司',b:'67'},{a:'沈阳隆基电磁科技股份有限公司',b:'56'},{a:'中国科学院过程工程研究所',b:'78'},
+	{a:'宏大爆破工程集团有限责任公司',b:'45'},{a:'鞍钢集团矿业设计研究院有限公司',b:'23'},{a:'辽宁电力能源发展集团监理有限公司鞍山分公司',b:'69'},{a:'辽宁五寰特种材料与智能装备产业技术研究院有限公司',b:'27'},
+	{a:'中铝山东工程技术有限公司',b:'59'},{a:'中国华冶科工集团有限公司',b:'14'},{a:'沈阳岩土工程技术测试开发有限公司',b:'38'},{a:'永明项目管理有限公司',b:'41'},
+] as any)
+
 onMounted(async () => {
-	getMemberJobStatusFn();
-	getPersonList();
+	drawBar()
 });
 </script>
 
@@ -517,13 +196,11 @@ onMounted(async () => {
 	.header {
 		display: flex;
 		justify-content: space-between;
-		padding: 20px 20px;
+		padding: 10px 20px;
 		border-top: none;
 		border-left: none;
 		border-right: none;
 		border-bottom: 1px solid #0059ff;
-
-		// height: 10%;
 		.hLeft {
 			width: 50%;
 			font-size: 20px;
@@ -533,37 +210,85 @@ onMounted(async () => {
 			background-clip: text;
 			color: transparent;
 		}
-
-		.hRight {
-			width: 50%;
-		}
 	}
 
 	.content {
-		height: 90%;
-
-		// background-color: #fff;
+		// background-color: darkred;
+		height: 92.5%;
 		.contentTop {
+			padding: 0 10px;
 			height: 40%;
+			// background-color: #fff;
+			font-size: 13px;
+			.line1{
+				color: #fff;
+				padding-top: 5px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				line-height: 30px;
+				height: 30px;
+				font-size: 15px;
+				.numberCard{
+					font-size: 15px;
+					padding: 0 8px;
+					margin-left: 3px;
+					font-weight: bold;
+					color: #47bcec;
+					background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+					background-size: 100% 100%;
+				}
+				.dayRadio{
+					font-size: 15px;
+					margin-left: 15px;
+					font-weight: bold;
+					color: #47bcec;
+				}
+				.iconCenter{
+					display:flex;
+					justify-content:center;
+					align-items:center
+				}
+			}
+			.line2{
+				padding-top: 5px;
+				display:flex;
+				justify-content:flex-start;
+				align-items:center;
+				line-height:25px;
+				height: 25px;
+				.line2Item{
+					color: #fff;
+					width: 120px;
+					text-align: center;
+					cursor: pointer;
+					// background-color: #fff;
+					background: rgb(0,33,116);
+					background: linear-gradient(270deg, rgba(0,33,116,0.8) 0%, rgba(40,88,184,0.3) 96%);
+				}
+				.activeTab{
+					background: rgb(0,33,116);
+					background: linear-gradient(270deg, rgba(0,33,116,1) 0%, rgba(40,88,184,1) 96%);
+				}
+			}
+			.barContent{
+				height: calc(100% - 65px);
+			}
 		}
 
 		.centerBottom {
-			// width: 100%;
 			height: 60%;
-			// background-color: #fff;
 			position: relative;
 
-			.leftTop {
+			.cbTop {
 				width: 100%;
-				height: 35%;
+				height: 100%;
 
 				.header {
-					// width: 100%;
-					// height: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					padding: 20px 20px;
+					// padding: 20px 20px;
 					border-bottom: 1px solid #0059ff;
 
 					.hLeft {
@@ -575,220 +300,210 @@ onMounted(async () => {
 						background-clip: text;
 						color: transparent;
 					}
-
-					.hRight {
-						width: 50%;
-					}
 				}
 
 				.content {
-					padding: 0 20px;
-
-					::v-deep .el-tabs__item {
+					padding: 0 10px;
+					height: 90%;
+					// background-color: rgba($color: #fff, $alpha: 0.1);
+					.cbLine1{
 						color: #fff;
-					}
-
-					::v-deep .el-tabs__nav-wrap::after {
-						background-color: rgba(255, 0, 0, 0);
-					}
-
-					.tabList {
+						padding-top: 5px;
 						display: flex;
-						width: 100%;
-						height: 30%;
-						// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
-						background-color: #00224f;
-						background-size: 100% 100%;
-						left: 75.5%;
-						top: 75%;
-						color: #fff;
-						font-size: 14px;
+						justify-content: space-between;
+						align-items: center;
 						line-height: 30px;
-						justify-content: space-around;
-						text-align: center;
-
-						div {
-							width: 100px;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
+						height: 30px;
+						font-size: 15px;
+						.numberCard{
+							font-size: 15px;
+							padding: 0 8px;
+							margin-left: 3px;
+							font-weight: bold;
+							color: #47bcec;
+							background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+							background-size: 100% 100%;
 						}
 					}
-
-					.listBox {
-
-						// height: 10%;
-						.listStyle {
+					.cbProcess{
+						padding-top: 5px;
+						height: calc(100% - 55px);
+						overflow: hidden;
+						// background-color: #fff;
+						.pItem{
+							width: 100%;
+							height: 55px;
 							display: flex;
-							justify-content: space-around;
+							// background-color: #fff;
+							font-size: 13px;
 							color: #fff;
-							height: 12%;
-							line-height: 25px;
-							font-size: 12px;
-							text-align: center;
-
-							div {
-								width: 100px;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
+							.pLeft{
+								width: 20%;
+								height: 55px;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								.plInner{
+									width: 80px;
+									// text-align: center;
+									line-height: 30px;
+									// background-color: darkred;
+									border-radius: 100px;
+								}
+								
+							}
+							.pRight{
+								width: 80%;
+								height: 55px;
+								.prTop{
+									// background-color: darkblue;
+									display: flex;
+									justify-content: space-between;
+									height: 30px;
+									.prtLeft{
+										display: flex;
+										justify-content: center;
+										align-items: flex-end;
+									}
+									.prtRight{
+										display: flex;
+										justify-content: center;
+										align-items: flex-end;
+									}
+								}
+								.prBottom{
+									// background-color: purple;
+									height: 15px;
+									.processLineBg{
+										background-color: rgba(50,50,50,0.5);
+										// transform: scaleX(-1);
+										.processLine{
+											margin-top: 10px;
+											// padding-top: 10px;
+											height: 5px;
+											display: flex;
+											justify-content: flex-end;
+											.processLineBtn{
+												width:3px;
+												height:9px;
+												background:#fff;
+												transform: translateY(-2px);
+											}
+										}
+										// .plBgc1{
+										// 	background: rgb(150,0,0);
+										// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
+										// }
+									}
+								}
 							}
 						}
-
-						.listStyle:hover {
-							background: #003c84;
-						}
-					}
-
-					.notoDta {
-						top: 52%;
-						width: 45%;
-						left: 28%;
-						text-align: center;
-						position: absolute;
-
-						img {
-							width: 40%;
-							margin: 5% 30%;
-						}
-
-						p {
-							color: #fff;
-							font-size: 14px;
-							margin: -6% 37%;
-						}
 					}
 				}
 			}
-
-			::v-deep .el-input__inner {
-				color: #fff;
-			}
-
-			::v-deep .el-select .el-input .el-select__caret {
-				color: #fff;
-			}
-
-			::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;
-			}
-
-			.dialogContainer {
-				padding: 0 50px;
-
-				// height: 600px;
-				::v-deep .el-tabs__item {
-					color: #fff;
-				}
-
-				::v-deep .el-tabs__nav-wrap::after {
-					background-color: rgba(255, 0, 0, 0);
-				}
-
-				.tabList {
-					display: flex;
-					width: 100%;
-					height: 14%;
-					background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
-					// background-color: #00224f;
-					background-size: 100% 100%;
-					left: 75.5%;
-					top: 75%;
-					color: #fff;
-					font-size: 14px;
-					line-height: 30px;
-					justify-content: space-around;
-					text-align: center;
-
-					div {
-						width: 100px;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
-				}
-
-				.listBox {
-
-					// height: 10%;
-					.listStyle {
-						display: flex;
-						justify-content: space-around;
-						color: #fff;
-						height: 12%;
-						line-height: 25px;
-						font-size: 12px;
-						text-align: center;
-
-						div {
-							width: 100px;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
-						}
-					}
-
-					.listStyle:hover {
-						background: #003c84;
-					}
-				}
-
-				.notoDta {
-					top: 40%;
-					width: 30%;
-					left: 35%;
-					text-align: center;
-					position: absolute;
-
-					img {
-						width: 40%;
-						margin: 5% 30%;
-					}
-
-					p {
-						color: #fff;
-						font-size: 14px;
-						margin: -6% 37%;
-					}
-				}
-			}
-
-			::v-deep .el-dialog {
-				background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
-				// background-color: #fff;
-				background-size: 100% 100%;
-				margin-top: 12%;
-			}
-
-			::v-deep .el-dialog__headerbtn {
-				right: 35px;
-				top: 25px;
-			}
-
-			::v-deep .el-dialog .el-dialog__header .el-dialog__title {
-				margin-left: 30px;
-				margin-top: 10px;
-				font-size: 18px;
-				color: #fff;
-				position: absolute;
-			}
-
-			::v-deep el-dialog__header {
-				margin-top: 20px;
-			}
 		}
 	}
 }
+.scroll {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+.plBgc1{
+	background: rgb(139,0,0);
+	background: linear-gradient(90deg, rgba(139,0,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc1{
+	background: rgb(139,0,0);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,0,1) 100%);
+}
+.plBgc2{
+	background: rgb(155,155,0);
+	background: linear-gradient(90deg, rgba(155,155,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc2{
+	background: rgb(155,155,0);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(155,0,0,1) 100%);
+}
+.plBgc3{
+	background: rgb(0,0,139);
+	background: linear-gradient(90deg, rgba(0,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc3{
+	background: rgb(0,0,139);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,0,139,1) 100%);
+}
+.plBgc4{
+	background: rgb(139,0,139);
+	background: linear-gradient(90deg, rgba(139,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc4{
+	background: rgb(139,0,139);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,139,1) 100%);
+}
+.plBgc5{
+	background: rgb(72,61,139);
+	background: linear-gradient(90deg, rgba(72,61,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc5{
+	background: rgb(72,61,139);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(72,61,139,1) 100%);
+}
+.plBgc6{
+	background: rgb(0,206,209);
+	background: linear-gradient(90deg, rgba(0,206,209,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc6{
+	background: rgb(0,206,209);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,206,209,1) 100%);
+}
+.plBgc7{
+	background: rgb(47,79,79);
+	background: linear-gradient(90deg, rgba(47,79,79,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc7{
+	background: rgb(47,79,79);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(47,79,79,1) 100%);
+}
+.plBgc8{
+	background: rgb(0,100,0);
+	background: linear-gradient(90deg, rgba(0,100,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc8{
+	background: rgb(0,100,0);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,100,0,1) 100%);
+}
+.plBgc9{
+	background: rgb(189,183,107);
+	background: linear-gradient(90deg, rgba(189,183,107,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc9{
+	background: rgb(189,183,107);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(189,183,107,1) 100%);
+}
+.plBgc10{
+	background: rgb(255,140,0);
+	background: linear-gradient(90deg, rgba(255,140,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc10{
+	background: rgb(255,140,0);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(255,140,0,1) 100%);
+}
+.plBgc11{
+	background: rgb(233,150,122);
+	background: linear-gradient(90deg, rgba(233,150,122,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc11{
+	background: rgb(233,150,122);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(233,150,122,1) 100%);
+}
+.plBgc0{
+	background: rgb(0,139,139);
+	background: linear-gradient(90deg, rgba(0,139,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc0{
+	background: rgb(0,139,139);
+	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,139,139,1) 100%);
+}
+
 </style>