From f423dc8ceea16c92cc775c4f78759524afbb6709 Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Sat, 13 Jul 2024 19:10:51 +0800
Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=BC=B9?=
 =?UTF-8?q?=E5=B9=95=E9=85=8D=E7=BD=AE=20=E8=A7=86=E9=A2=91=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .env.production                               |   4 +-
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 public/static/bim.html                        | 214 ++--
 src/api/modules/agjtLiveApi.ts                |  15 +
 src/components/setBarrageDialog.vue           | 400 ++++++++
 src/config/config.ts                          |   4 +-
 src/routers/modules/staticRouter.ts           |   4 +-
 src/views/agjtLiveScreen/indexLive.vue        |   4 +-
 .../agjtLiveScreen/liveScreen/centerTop.vue   | 309 +++++-
 src/views/agjtLiveScreen/liveScreen/index.vue | 109 +-
 .../agjtLiveScreen/liveScreen/leftBottom.vue  |   2 +
 .../dialogCompnnents/progress-tree.vue        | 494 +++++++++
 .../dialogCompnnents/weather-info.vue         | 955 ++----------------
 src/views/sevenLargeScreen/bImModel/index.vue |  10 +-
 16 files changed, 1482 insertions(+), 1054 deletions(-)
 create mode 100644 src/components/setBarrageDialog.vue
 create mode 100644 src/views/commandScreen/dialogCompnnents/progress-tree.vue

diff --git a/.env.development b/.env.development
index 67b2660..4f79e0e 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.155:19111'
-# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 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'
@@ -25,7 +25,7 @@ NODE_ENV = 'development'
 # 七参数标准版(演示平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # agjt
-VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
+# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
 # VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信/重庆市南岸区
diff --git a/.env.production b/.env.production
index dfd0848..b9f4c4f 100644
--- a/.env.production
+++ b/.env.production
@@ -22,7 +22,7 @@ NODE_ENV = "production"
 # 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://101.43.164.214:11111'
 # 中科安信
@@ -34,7 +34,7 @@ NODE_ENV = "production"
 # 九柱
 # VITE_API_URL = 'http://jxjzw.zhgdyun.com:11111'
 # 同济
-VITE_API_URL = 'http://192.168.110.220:9809'
+# VITE_API_URL = 'http://192.168.110.220:9809'
 
 # 打包
 VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
diff --git a/package-lock.json b/package-lock.json
index 76858e0..f8d8cdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
 				"@element-plus/icons-vue": "^2.0.10",
 				"@vueup/vue-quill": "^1.0.0-alpha.40",
 				"@vueuse/core": "^9.12.0",
-				"@wangeditor/editor": "^5.1.12",
+				"@wangeditor/editor": "^5.1.23",
 				"@wangeditor/editor-for-vue": "^5.1.12",
 				"amfe-flexible": "^2.2.1",
 				"axios": "^1.2.1",
@@ -3963,7 +3963,7 @@
 		},
 		"node_modules/@wangeditor/editor": {
 			"version": "5.1.23",
-			"resolved": "https://registry.npmjs.org/@wangeditor/editor/-/editor-5.1.23.tgz",
+			"resolved": "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.23.tgz",
 			"integrity": "sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==",
 			"dependencies": {
 				"@uppy/core": "^2.1.1",
@@ -19422,7 +19422,7 @@
 		},
 		"@wangeditor/editor": {
 			"version": "5.1.23",
-			"resolved": "https://registry.npmjs.org/@wangeditor/editor/-/editor-5.1.23.tgz",
+			"resolved": "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.23.tgz",
 			"integrity": "sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==",
 			"requires": {
 				"@uppy/core": "^2.1.1",
diff --git a/package.json b/package.json
index 8020e6b..067533c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
 		"@element-plus/icons-vue": "^2.0.10",
 		"@vueup/vue-quill": "^1.0.0-alpha.40",
 		"@vueuse/core": "^9.12.0",
-		"@wangeditor/editor": "^5.1.12",
+		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"amfe-flexible": "^2.2.1",
 		"axios": "^1.2.1",
diff --git a/public/static/bim.html b/public/static/bim.html
index 89077f9..3b541f2 100644
--- a/public/static/bim.html
+++ b/public/static/bim.html
@@ -1,108 +1,116 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<title>My first BIMFACE app</title>
-	</head>
-	<body>
-		<style>
-			::v-deep #cloud-main-canvas {
-				width: 100%;
-				height: 100%;
-			}
-		</style>
-		<div id="domId" style="width: 100%; height: 98vh"></div>
-		<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
-		<script>
-			// var token = JSON.parse(localStorage.getItem('bimToken'));
+
+<head>
+    <meta charset="utf-8" />
+    <title>My first BIMFACE app</title>
+</head>
+
+<body>
+    <style>
+         ::v-deep #cloud-main-canvas {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    <div id="domId" style="width: 100%; height: 98vh"></div>
+    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
+    <script>
+        // var token = JSON.parse(localStorage.getItem('bimToken'));
         //  console.log('取到的token',token);
-			let viewer3D;
-			let app;
-			let viewToken = "06c56a5e060d42659f29c078af03536e";
-			console.log('viewToken',viewToken);
-			let loaderConfig = new BimfaceSDKLoaderConfig();
-			loaderConfig.viewToken = viewToken;
-			BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
-			function successCallback(viewMetaData) {
-				let domShow = document.getElementById("domId");
-				let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
-				webAppConfig.domElement = domShow;
-				app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
-				app.addView(viewToken);
-				viewer3D = app.getViewer();
-			}
 
-			function failureCallback(error) {
-				console.log(error);
-			}
-			// window.addEventListener("message", async function(e) {
-			// 	// const modelId = e.data.modelId
-			// 	const data = e.data || {};
-			// 	if (data.token) {
-			// 	// removeModel(modelId)
-			// 	document.getElementById("domId").innerHTML = "";
-			// 	await bimCallback(data.token);
-			// 	if (data.hideArr && data.colorArr) {
-			// 		configValue.hideArr = data.hideArr;
-			// 		configValue.colorArr = data.colorArr;
-			// 	}
-			// 	}
-			// 	// console.log(e.data, '父级页面传来的数据')
-			// 	// setTimeout(() => {
-			// 	//   window.parent.postMessage({ msg: 'hello' })
-			// 	// }, 2000)
-			// });
-			// const bimCallback = (viewToken) => {
-			// 	// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
-			// 	let loaderConfig = new BimfaceSDKLoaderConfig();
-			// 	loaderConfig.viewToken = viewToken;
-			// 	BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
-			// 	function successCallback(viewMetaData) {
-			// 	let domShow = document.getElementById("domId");
-			// 	let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
-			// 	webAppConfig.domElement = domShow;
-			// 	app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
-			// 	app.addView(viewToken);
-			// 	viewer3D = app.getViewer();
-			// 	// 监听添加view完成的事件
-			// 	viewer3D.addEventListener(
-			// 		Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
-			// 		function() {
-			// 		// 调用viewer3D对象的Method，可以继续扩展功能
-			// 		// 从viewer3D对象中获取模型对象model3D
-			// 		model3D = viewer3D.getModel();
-			// 		// 获取模型状态
-			// 		modelState = viewer3D.getCurrentState();
-			// 		// 渲染3D模型
-			// 		viewer3D.render();
-			// 		// 操作模型
-			// 		renderConfigModel();
-			// 		}
-			// 	);
-			// 	}
 
-			// 	function failureCallback(error) {
-			// 	console.log(error);
-			// 	}
-			// };
-			// function renderConfigModel() {
-			// 	// 恢复模型状态
-			// 	viewer3D.setState(modelState);
-			// 	viewer3D.render();
-			// }
-			// console.log(666)
-			// bimCallback("06c56a5e060d42659f29c078af03536e");
-			// 监听父组件的信息传递
-			// window.addEventListener("message", async function(e) {
-			// 	// const modelId = e.data.modelId
-			// 	const data = e.data || {};
-			// 	console.log(data,'发送的值')
-			// 	if (data.token) {
-			// 		// removeModel(modelId)
-			// 		document.getElementById("domId").innerHTML = "";
-			// 		await bimCallback("06c56a5e060d42659f29c078af03536e");
-			// 	}
-			// });
-		</script>
-	</body>
-</html>
+
+        window.addEventListener("message", async function(e) {
+            // const modelId = e.data.modelId
+            // const data = e.data || {};
+            // if (data.token) {
+            // // removeModel(modelId)
+            // document.getElementById("domId").innerHTML = "";
+            // await bimCallback(data.token);
+            // if (data.hideArr && data.colorArr) {
+            // 	configValue.hideArr = data.hideArr;
+            // 	configValue.colorArr = data.colorArr;
+            // }
+            // }
+            console.log(e.data, '父级页面传来的数据')
+            let viewer3D;
+            let app;
+            // let viewToken = "06c56a5e060d42659f29c078af03536e";
+            let viewToken = e.data.token;
+            console.log('viewToken', viewToken);
+            let loaderConfig = new BimfaceSDKLoaderConfig();
+            loaderConfig.viewToken = viewToken;
+            BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
+
+            function successCallback(viewMetaData) {
+                let domShow = document.getElementById("domId");
+                let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
+                webAppConfig.domElement = domShow;
+                app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
+                app.addView(viewToken);
+                viewer3D = app.getViewer();
+            }
+
+            function failureCallback(error) {
+                console.log(error);
+            }
+            // setTimeout(() => {
+            //   window.parent.postMessage({ msg: 'hello' })
+            // }, 2000)
+        });
+        // const bimCallback = (viewToken) => {
+        // 	// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
+        // 	let loaderConfig = new BimfaceSDKLoaderConfig();
+        // 	loaderConfig.viewToken = viewToken;
+        // 	BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
+        // 	function successCallback(viewMetaData) {
+        // 	let domShow = document.getElementById("domId");
+        // 	let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
+        // 	webAppConfig.domElement = domShow;
+        // 	app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
+        // 	app.addView(viewToken);
+        // 	viewer3D = app.getViewer();
+        // 	// 监听添加view完成的事件
+        // 	viewer3D.addEventListener(
+        // 		Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
+        // 		function() {
+        // 		// 调用viewer3D对象的Method，可以继续扩展功能
+        // 		// 从viewer3D对象中获取模型对象model3D
+        // 		model3D = viewer3D.getModel();
+        // 		// 获取模型状态
+        // 		modelState = viewer3D.getCurrentState();
+        // 		// 渲染3D模型
+        // 		viewer3D.render();
+        // 		// 操作模型
+        // 		renderConfigModel();
+        // 		}
+        // 	);
+        // 	}
+
+        // 	function failureCallback(error) {
+        // 	console.log(error);
+        // 	}
+        // };
+        // function renderConfigModel() {
+        // 	// 恢复模型状态
+        // 	viewer3D.setState(modelState);
+        // 	viewer3D.render();
+        // }
+        // console.log(666)
+        // bimCallback("06c56a5e060d42659f29c078af03536e");
+        // 监听父组件的信息传递
+        // window.addEventListener("message", async function(e) {
+        // 	// const modelId = e.data.modelId
+        // 	const data = e.data || {};
+        // 	console.log(data,'发送的值')
+        // 	if (data.token) {
+        // 		// removeModel(modelId)
+        // 		document.getElementById("domId").innerHTML = "";
+        // 		await bimCallback("06c56a5e060d42659f29c078af03536e");
+        // 	}
+        // });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/api/modules/agjtLiveApi.ts b/src/api/modules/agjtLiveApi.ts
index 1487771..8d6345f 100644
--- a/src/api/modules/agjtLiveApi.ts
+++ b/src/api/modules/agjtLiveApi.ts
@@ -43,6 +43,21 @@ export const configWeekVideoListApi = (params: {}, noLoading: boolean) => {
 	return http.get(BASEURL + `/xmgl/educationConfigWeekVideo/list`, params, { headers: { noLoading: noLoading } });
 };
 
+//现场大屏视频API
+export const getLiveScreenProgramPage = (params: {}, noLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzLiveScreenProgram/page`, params, { headers: { noLoading: noLoading } });
+};
+
+//现场大屏保存弹幕API
+export const getLiveScreenDanmuSaveObj = (params: {}, noLoading: boolean) => {
+	return http.post(BASEURL + `/xmgl/xzLiveScreenDanmu/saveObj`, params, { headers: { noLoading: noLoading } });
+};
+
+//现场大屏保存弹幕API
+export const getLiveScreenDanmuPage = (params: {}, noLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzLiveScreenDanmu/page`, params, { headers: { noLoading: noLoading } });
+};
+
 //获取劳务实名制信息API---上
 export const selectPersonTypeAndEduStatisticsApi = (params: {}, noLoading: boolean) => {
 	// return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: noLoading } });
diff --git a/src/components/setBarrageDialog.vue b/src/components/setBarrageDialog.vue
new file mode 100644
index 0000000..63e2a23
--- /dev/null
+++ b/src/components/setBarrageDialog.vue
@@ -0,0 +1,400 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
+<template>
+	<div class="setvideodialog" v-if="dialogInfo.showDialog">
+		<div class="listdetail">
+			<div class="dialog-content-more">
+				<div class="dialog-title">
+					<img src="@/assets/images/titleIcon.png" alt="" />
+					<div class="title-text">
+						<i>{{ dialogInfo.postData?.title }}</i>
+					</div>
+					<div class="close-icon" @click="closeDialog">
+						<el-icon>
+							<Close />
+						</el-icon>
+					</div>
+				</div>
+				<div class="contont-video" style="color: #fff; font-size: 24px">
+					<div style="border: 1px solid #ccc; width: 95%">
+						<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+						<Editor class="editor" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
+					</div>
+					<div class="footer-btn">
+						<el-button color="#0a2249" :icon="CircleCloseFilled" @click="closeDialog">取消</el-button>
+						<el-button color="#0a2249" :icon="CircleCheckFilled" @click="saveBtn">保存</el-button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onMounted, reactive, ref, onBeforeUnmount, shallowRef, watch } from "vue";
+import { CircleCloseFilled, CircleCheckFilled } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+//引入现场大屏API
+import { getLiveScreenDanmuSaveObj } from "@/api/modules/agjtLiveApi";
+import { GlobalStore } from "@/stores";
+// import moment from "moment";
+// import { COMPANY } from "@/config/config";
+const store = GlobalStore();
+// const BASEURL = import.meta.env.VITE_API_URL;
+const props = defineProps(["valueHtml"]);
+const emits = defineEmits(["updateConfig"]);
+const mode = ref("default"); // 或 'simple'
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+	// setTimeout(() => {
+	// 	valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
+	// }, 1500);
+});
+
+watch(
+	() => props.valueHtml,
+	() => {
+		console.log("我是弹幕配置", props.valueHtml);
+		valueHtml.value = props.valueHtml;
+	}
+);
+
+const toolbarConfig = {
+	toolbarKeys: ["undo", "redo", "fontFamily", "bold", "italic", "underline", "color"]
+};
+const editorConfig = {
+	placeholder: "请输入文字...",
+	hoverbarKeys: {
+		text: {
+			menuKeys: [
+				"bold", // 加粗
+				"italic", // 斜体
+				"underline", // 下划线
+				"color", // 颜色
+				"clearStyle" // 清除格式
+			]
+		}
+	}
+};
+
+const saveBtn = async () => {
+	console.log(valueHtml.value);
+	const requestData = {
+		projectSn: store.sn,
+		userId: store.userId,
+		content: valueHtml.value
+	};
+	const res: any = await getLiveScreenDanmuSaveObj(requestData, true);
+	if (res.success) {
+		console.log("修改成功", res);
+		ElMessage({
+			showClose: true,
+			message: "保存成功",
+			type: "success"
+		});
+		dialogInfo.showDialog = false;
+		// configWeekVideoListFn(true);
+		emits("updateConfig");
+	}
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+	const editor = editorRef.value;
+	if (editor == null) return;
+	editor.destroy();
+});
+
+const handleCreated = (editor: any) => {
+	editorRef.value = editor; // 记录 editor 实例，重要！
+};
+
+const dialogInfo = reactive({
+	showDialog: false,
+	postData: {} as any,
+	videoUploadList: [
+		{
+			id: 1,
+			title: "周一"
+		},
+		{
+			id: 2,
+			title: "周二"
+		},
+		{
+			id: 3,
+			title: "周三"
+		},
+		{
+			id: 4,
+			title: "周四"
+		},
+		{
+			id: 5,
+			title: "周五"
+		},
+		{
+			id: 6,
+			title: "周六"
+		},
+		{
+			id: 7,
+			title: "周日"
+		}
+	]
+});
+
+const closeDialog = () => {
+	dialogInfo.showDialog = false;
+	dialogInfo.postData = {};
+};
+function openDialog(obj: any) {
+	dialogInfo.postData = obj;
+	dialogInfo.showDialog = true;
+}
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+	openDialog
+});
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+.setvideodialog {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	right: 0%;
+	top: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 100;
+
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 15%;
+		top: 21%;
+		width: 70%;
+		height: 60%;
+		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+	}
+
+	.dialog-content-show {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 15%;
+		top: 1%;
+		width: 70%;
+		height: 98%;
+		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+	}
+
+	.listdetail {
+		position: absolute;
+		// box-sizing: border-box;
+		// padding: 1%;
+		// right: 3%;
+		// top: 5%;
+		width: 70%;
+		// height: 50%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgba(8, 31, 63, 0.7);
+		z-index: 21;
+
+		.dialog-content-more {
+			// position: absolute;
+			// box-sizing: border-box;
+			// padding: 1%;
+			// left: 15%;
+			// top: 21%;
+			width: 100%;
+			height: 100%;
+			background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
+			background-size: 100% 100%;
+			z-index: 21;
+		}
+
+		.contont-video {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			// flex-wrap: wrap;
+			margin-top: 10px;
+			.footer-btn {
+				padding: 20px;
+				> button:first-child {
+					margin-right: 40px;
+				}
+				> button {
+					border: 1px solid #ccc;
+				}
+			}
+			:deep(.w-e-bar) {
+				color: #ffecec !important;
+				background-color: transparent !important;
+				svg {
+					fill: #ffecec !important;
+				}
+				.w-e-bar-item .disabled,
+				.w-e-bar-item button {
+					color: #ffecec !important;
+					background-color: transparent;
+				}
+				.w-e-bar-item .disabled:hover,
+				.w-e-bar-item button:hover {
+					background-color: transparent;
+				}
+				.w-e-bar-divider {
+					display: none;
+				}
+				.w-e-select-list {
+					background-color: #112748 !important;
+				}
+
+				.w-e-select-list ul .selected,
+				.w-e-select-list ul li:hover {
+					background-color: white !important;
+					color: black !important;
+				}
+			}
+			.editor {
+				height: 380px !important;
+				:deep(.w-e-text-container) {
+					color: #ffecec !important;
+					background-color: transparent !important;
+					font-size: 16px !important;
+				}
+				:deep() {
+					.w-e-hover-bar {
+						background-color: #0a2249 !important;
+					}
+				}
+			}
+			// .video-list {
+			// 	width: 33%;
+			// 	display: flex;
+			// 	align-items: center;
+			// 	justify-content: center;
+			// 	font-size: 15px;
+			// 	margin-top: 30px;
+			// 	font-weight: bold;
+			// 	.no-inherit {
+			// 		margin-left: 8px;
+			// 	}
+			// 	.upload-demo {
+			// 		width: 45%;
+			// 	}
+			// 	:deep(.el-upload-list),
+			// 	:deep(.el-upload-list__item) {
+			// 		margin: 0;
+			// 	}
+			// 	:deep(.el-upload-list__item-info) {
+			// 		width: 100%;
+			// 	}
+			// 	:deep(.el-button.el-button--primary.el-button--default) {
+			// 		padding: 10px 15px;
+			// 		height: 40px;
+			// 	}
+
+			// 	:deep(.videoupload) {
+			// 		font-size: 20px;
+			// 	}
+			// }
+		}
+	}
+
+	.dialog-content,
+	.dialog-content-show,
+	.dialog-content-more {
+		position: relative;
+
+		.political-outlook {
+			height: 100%;
+		}
+
+		.dialog-article {
+			height: 95%;
+		}
+
+		.close-icon {
+			// position: absolute;
+			// right: 3%;
+			// top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: 18px;
+		}
+
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: 18px;
+			font-family: "OPPOSans-Bold";
+			display: flex;
+			align-items: center;
+			margin: 0 20px;
+			padding-top: 10px;
+
+			.title-time {
+				font-size: 30px;
+				color: #f34234;
+				position: absolute;
+				top: 3%;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+
+			.title-img {
+				width: 3%;
+				height: 3%;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.title-text {
+				margin-left: 1%;
+				margin-right: auto;
+			}
+		}
+	}
+}
+
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+
+	p {
+		color: #fff;
+		font-size: 14px;
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/config/config.ts b/src/config/config.ts
index 9e7c092..dde00df 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -28,8 +28,8 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "zsbf"; //中水北方
 // export const COMPANY: string = "as"; //鞍山项目
 // export const COMPANY: string = "agjt"; //鞍钢集团
-export const COMPANY: string = "tj"; // 同济项目
-// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
+// export const COMPANY: string = "tj"; // 同济项目
+export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
 // export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index d0cedfd..f875a6c 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -24,9 +24,9 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
 		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
-		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
+		component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
 		// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
 		// component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
diff --git a/src/views/agjtLiveScreen/indexLive.vue b/src/views/agjtLiveScreen/indexLive.vue
index 5c25b37..fec91c8 100644
--- a/src/views/agjtLiveScreen/indexLive.vue
+++ b/src/views/agjtLiveScreen/indexLive.vue
@@ -310,10 +310,10 @@ function loginOut() {
 
 	.dataBoardContent {
 		// height: 81%;//二级
-		height: 85%; //一级
+		height: 86%; //一级
 		// height: calc(100% - 15px - 50px - 60px - 20px);
 		// margin: 75px auto 16px auto;//二级
-		margin: 10px auto 10px auto; //一级
+		margin: 0 auto 10px auto; //一级
 		width: calc(100% - 40px);
 		// background-color: #01131F;
 		// opacity: 0.9;
diff --git a/src/views/agjtLiveScreen/liveScreen/centerTop.vue b/src/views/agjtLiveScreen/liveScreen/centerTop.vue
index 2027a68..a81d55d 100644
--- a/src/views/agjtLiveScreen/liveScreen/centerTop.vue
+++ b/src/views/agjtLiveScreen/liveScreen/centerTop.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="leftTop">
+		<div class="barrageText">
+			<div :style="`animation-duration: ${videoInfo.secondTime}s;`" v-html="videoInfo.barrageString"></div>
+		</div>
 		<Card title="安全教育">
-			<div class="video-config" @click="openPeopleCountDialog" v-if="store.accountType == 10">
+			<!-- v-if="store.accountType == 10" -->
+			<div class="video-config" @click="openPeopleCountDialog">
 				<el-icon class="config-icon" color="#57BCE8" size="24"><Setting /></el-icon>
 			</div>
 			<!-- <div class="href-content" v-if="showVideo == 1">
@@ -17,30 +21,55 @@
 					</el-carousel-item>
 				</el-carousel>
 			</div> -->
-			<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
-				<video id="myVideo" :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
+			<div class="videoBox" v-if="showVideo == 2 && videoInfo.videoList.length > 0">
+				<el-carousel ref="carousel" indicator-position="none" :autoplay="false" @change="onChange">
+					<el-carousel-item v-for="item in videoInfo.videoList" :key="item.id">
+						<div class="videoBox">
+							<!-- loop autoplay -->
+							<video v-if="item.fileType == 1" id="myVideo" :src="item.filePath" class="videos" controls></video>
+							<el-image class="images" v-else-if="item.fileType == 2" :src="item.filePath" fit="fill" />
+						</div>
+					</el-carousel-item>
+				</el-carousel>
+			</div>
+			<div class="not-data" v-else>
+				<img src="@/assets/images/noData.png" alt="" />
+				<p>暂未配置</p>
 			</div>
 		</Card>
-		<setVideoDialog ref="partyBuildRef" @updateConfig="updateConfig"></setVideoDialog>
+		<setBarrageDialog ref="partyBuildRef" :valueHtml="videoInfo.barrageString" @updateConfig="updateConfig"></setBarrageDialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, reactive, nextTick } from "vue";
 import { GlobalStore } from "@/stores";
 import { ElMessage } from "element-plus";
 // import { selectLiveVideoListApi } from "@/api/modules/video";
 import ckplayerComp from "./ckplayerComp.vue";
 import { COMPANY } from "@/config/config";
-import setVideoDialog from "@/components/setVideoDialog.vue";
+import setBarrageDialog from "@/components/setBarrageDialog.vue";
 // import { configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
 //引入现场大屏API
-import { configWeekVideoListApi } from "@/api/modules/agjtLiveApi";
+import { getLiveScreenProgramPage, getLiveScreenDanmuPage } from "@/api/modules/agjtLiveApi";
 import moment from "moment";
 const store = GlobalStore();
-const BASEURL = import.meta.env.VITE_API_URL
-const videoList = ref([] as any);
+const BASEURL = import.meta.env.VITE_API_URL;
+const carousel = ref(null as any);
+const videoInfo = reactive({
+	videoList: [] as any,
+	videoIndex: 0,
+	timeout: null as any,
+	barrageString: "",
+	secondTime: 0,
+	newVideoIndex: -1,
+	isPlus: +1,
+	elevideo: null as any,
+	oldIndex: -1,
+	removeEventListener: null as any,
+	fn: null as any
+});
 // ts
 type Props = {
 	projectData?: any; // 传入项目信息
@@ -55,7 +84,7 @@ const projectData = ref({} as any);
 const partyBuildRef = ref();
 const openPeopleCountDialog = () => {
 	partyBuildRef.value.openDialog({
-		title: "配置视频"
+		title: "弹幕配置"
 	});
 };
 watch(
@@ -67,6 +96,96 @@ watch(
 		}
 	}
 );
+const optionTime = [1000, 60 * 1000, 60 * 60 * 1000];
+const onChange = (newIndex: number, oldIndex?: number) => {
+	// 2 0 0 2 右 其实是左
+	// 0 2 2 2 左 其实是右
+	// 1 0 0 2 左 其实是右
+	// 0 空 (1 0)(2 1) (0 2)  2 - 0
+	// 0 空 (2 0)(1 2) (0 1)
+	console.log(newIndex, oldIndex, videoInfo.videoIndex, videoInfo.videoList.length - 1);
+	if (oldIndex != undefined) {
+		// (oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1)
+		// (oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1 || ) ||
+		// 	(oldIndex < newIndex && oldIndex == videoInfo.videoList.length - 1) ||
+		// 	oldIndex > newIndex ||
+		// 	newIndex == 0
+		videoInfo.isPlus =
+			(oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1) ||
+			(oldIndex == videoInfo.videoList.length - 2 && newIndex == videoInfo.videoList.length - 1) ||
+			(oldIndex == videoInfo.videoList.length - 1 && newIndex == 0)
+				? 1
+				: -1;
+		// const a = oldIndex == videoInfo.videoList.length - 1 && newIndex == 0 ? "最后" : "不是";
+		// const b = newIndex == videoInfo.videoList.length - 1 && oldIndex == 0 ? "最后" : "不是";
+		// console.log(a, b);
+		// if (oldIndex == videoInfo.videoList.length - 1 && newIndex == 0) {
+		// 	videoInfo.videoIndex = -1;
+		// }
+	}
+	if (videoInfo.removeEventListener) {
+		videoInfo.removeEventListener.pause();
+		videoInfo.removeEventListener.removeEventListener("ended", videoInfo.fn);
+		videoInfo.removeEventListener = null;
+		videoInfo.fn = null;
+	}
+	// videoInfo.oldIndex = oldIndex;
+	// videoInfo.videoIndex = newIndex;
+	videoInfo.videoIndex = newIndex + 1 == videoInfo.videoList.length ? 0 : newIndex + 1;
+	console.log("判断是左是右", videoInfo.isPlus > 0 ? "右" : "左");
+	console.log("我是最新的索引", newIndex, oldIndex, videoInfo.videoIndex);
+	if (videoInfo.timeout) {
+		clearTimeout(videoInfo.timeout);
+	}
+	if (videoInfo.videoList[newIndex].fileType == 1) {
+		const resIndex = videoInfo.videoList.filter((item: any) => item.fileType == 1);
+		console.log(videoInfo.newVideoIndex, resIndex.length - 1);
+		
+		if (videoInfo.newVideoIndex == resIndex.length - 1) {
+			videoInfo.newVideoIndex = videoInfo.isPlus > 0 ? -1 : resIndex.length;
+		}
+		videoInfo.newVideoIndex = videoInfo.isPlus > 0 ? videoInfo.newVideoIndex : videoInfo.newVideoIndex - 1;
+		getVideo();
+	} else if (videoInfo.videoList[newIndex].fileType == 2) {
+		const newTime = videoInfo.videoList[newIndex].showTime * optionTime[videoInfo.videoList[newIndex].showUnit - 1];
+		videoInfo.timeout = setTimeout(() => {
+			// videoInfo.videoIndex = newIndex;
+			console.log("我是图片的加载", videoInfo.videoIndex);
+			setVideoIndex();
+			videoInfo.timeout = null;
+		}, newTime);
+		console.log("我是图片", newTime);
+	}
+};
+
+const setVideoIndex = () => {
+	// console.log("我是自动播放的", videoInfo.videoIndex, videoInfo.videoList.length, videoInfo.isPlus);
+	console.log(videoInfo.oldIndex);
+	// 视频
+	// const newIndex =
+	// 	videoInfo.oldIndex == videoInfo.videoList.length - 1 && videoInfo.videoIndex == 0
+	// 		? 0
+	// 		: videoInfo.videoIndex == videoInfo.videoList.length - 1 && videoInfo.oldIndex == 0
+	// 		? videoInfo.videoList.length - 1
+	// 		: videoInfo.videoIndex + 1;
+	// console.log("我是最后的", videoInfo.videoIndex, carousel.value);
+	console.log("我是视频的加载", videoInfo.videoIndex);
+	if (videoInfo.videoIndex == 0) {
+		videoInfo.videoIndex = 0;
+		videoInfo.timeout = null;
+		videoInfo.newVideoIndex = -1;
+		videoInfo.isPlus = +1;
+		videoInfo.oldIndex = -1;
+		videoInfo.elevideo = null;
+		videoInfo.elevideo = document.querySelectorAll(".videos");
+	}
+	carousel.value.setActiveItem(videoInfo.videoIndex);
+	// if (videoInfo.isPlus > 0) {
+	// 	carousel.value.next();
+	// } else {
+	// 	carousel.value.prev();
+	// }
+};
 
 // const BASEURL = import.meta.env.VITE_API_URL;
 // 显示视频
@@ -76,33 +195,96 @@ const showVideo = ref(2 as any);
 const showChangeVideo = ref(false as any);
 // 修改了视频配置
 const updateConfig = () => {
-	configWeekVideoListFn();
+	console.log("修改了弹幕");
+	getLiveScreenDanmuList();
+};
+const getLiveScreenDanmuList = async () => {
+	let data = {
+		projectSn: store.sn,
+		pageNo: 1,
+		pageSize: 2,
+		userId: store.userId
+	};
+	const res: any = await getLiveScreenDanmuPage(data, true);
+	if (res.result) {
+		// console.log("我是弹幕", res.result.records);
+		videoInfo.barrageString = res.result.records[0].content;
+		const htmlText = videoInfo.barrageString.replace(/<[^>]*>/g, "");
+		videoInfo.secondTime = Math.ceil(htmlText.length / 2);
+		// console.log(videoInfo.secondTime);
+		// videoInfo.videoList = res.result.records;
+	}
 };
 // 获取一周的配置视频数据
 const configWeekVideoListFn = async () => {
+	const today = moment().format("d");
+	// ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
+	const weekParamsKey = [7, 1, 2, 3, 4, 5, 6];
+	// console.log(weekParamsKey[+today]);
 	let data = {
 		projectSn: store.sn,
-		type: 3
-	}
-	const res: any = await configWeekVideoListApi(data, true);
+		pageNo: 1,
+		pageSize: 9999,
+		dayOfWeek: weekParamsKey[+today]
+	};
+	const res: any = await getLiveScreenProgramPage(data, true);
 	if (res.result) {
+		// console.log(res.result.records);
+		videoInfo.videoList = res.result.records;
+		videoInfo.videoList = videoInfo.videoList.reduce((prev: any, item: any) => {
+			const resultIndex = videoInfo.videoList.filter((ele: any) => ele.fileType == 1).findIndex((ele: any) => item.id == ele.id);
+			prev.push({
+				...item,
+				resIndex: resultIndex ? resultIndex : -1
+			});
+			return prev;
+		}, [] as any[]);
+		nextTick(() => {
+			videoInfo.elevideo = document.querySelectorAll(".videos");
+			onChange(0);
+		});
+
 		// 星期参数
-		const today = moment().format("d");
+		// const today = moment().format("d");
 		// const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
 		// projectData.value.videoUrl = res.result[0][weekParamsKey[+today]];
-		if(res.result.length != 0 && today == 0) projectData.value.videoUrl = res.result[0].sun
-		if(res.result.length != 0 && today == 1) projectData.value.videoUrl = res.result[0].mon
-		if(res.result.length != 0 && today == 2) projectData.value.videoUrl = res.result[0].tues
-		if(res.result.length != 0 && today == 3) projectData.value.videoUrl = res.result[0].wed
-		if(res.result.length != 0 && today == 4) projectData.value.videoUrl = res.result[0].thur
-		if(res.result.length != 0 && today == 5) projectData.value.videoUrl = res.result[0].fri
-		if(res.result.length != 0 && today == 6) projectData.value.videoUrl = res.result[0].sat
+		// projectData.value.videoUrl;
+		// if (res.result.length != 0 && today == 0) projectData.value.videoUrl = res.result[0].sun;
+		// if (res.result.length != 0 && today == 1) projectData.value.videoUrl = res.result[0].mon;
+		// if (res.result.length != 0 && today == 2) projectData.value.videoUrl = res.result[0].tues;
+		// if (res.result.length != 0 && today == 3) projectData.value.videoUrl = res.result[0].wed;
+		// if (res.result.length != 0 && today == 4) projectData.value.videoUrl = res.result[0].thur;
+		// if (res.result.length != 0 && today == 5) projectData.value.videoUrl = res.result[0].fri;
+		// if (res.result.length != 0 && today == 6) projectData.value.videoUrl = res.result[0].sat;
 	}
 };
-function playVideo(){
-	let video: any = document.getElementById("myVideo");
-  video.play();
-}
+const getVideo = () => {
+	console.log("我是开始的", videoInfo.newVideoIndex, videoInfo.isPlus);
+	videoInfo.newVideoIndex = videoInfo.newVideoIndex + videoInfo.isPlus;
+	videoInfo.newVideoIndex = videoInfo.newVideoIndex < 0 ? 0 : videoInfo.newVideoIndex;
+	console.log("我是结束的", videoInfo.newVideoIndex, videoInfo.isPlus);
+	// videoInfo.elevideo.forEach((element: any) => {
+	// 	element.pause();
+	// });
+
+	const elevideo = videoInfo.elevideo[videoInfo.newVideoIndex];
+	// let elevideo: any = document.getElementById("myVideo");
+	// console.log(videoInfo.elevideo);
+	elevideo.currentTime = 0;
+	elevideo.play();
+	const fn = () => {
+		//结束
+		console.log("播放结束");
+		elevideo.pause();
+		elevideo.load();
+		elevideo.removeEventListener("ended", fn);
+		setVideoIndex();
+		// elevideo = null;
+	};
+	elevideo.addEventListener("ended", fn);
+	videoInfo.removeEventListener = elevideo;
+	videoInfo.fn = fn;
+};
 // const getVideoList = async () => {
 // 	let res: any = await selectLiveVideoListApi({
 // 		projectSn: store.sn
@@ -125,27 +307,66 @@ function playVideo(){
 // };
 
 //测试方法，对接口时改成相应的方法注释
-const centerTopMethod = async () => {
-	
-}
+const centerTopMethod = async () => {};
 //将方法暴露给父组件
 defineExpose({
 	centerTopMethod
-})
+});
 
-onMounted(async () => {
+onMounted(() => {
 	// if (COMPANY !== "agjt") showVideo.value = 2;
 	// await getVideoList();
-	await configWeekVideoListFn(); 
+	configWeekVideoListFn();
+	getLiveScreenDanmuList();
 	// playVideo()
 });
 </script>
 
 <style lang="scss" scoped>
+.barrageText {
+	font-size: 36px;
+	color: #fff;
+	position: relative;
+	height: 10%;
+	overflow: hidden;
+
+	div {
+		// width: 100vw;
+		margin: 0;
+		position: absolute;
+		animation-name: barrage;
+		// animation-duration: 10s;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		// animation: barrage 10s linear infinite;
+		// top: 6%;
+		// left: 50%;
+		// transform: translateX(-50%);
+		:deep(p) {
+			margin: 0;
+			white-space: nowrap;
+		}
+	}
+}
+@keyframes barrage {
+	from {
+		left: 100%;
+		transform: translateX(5%);
+	}
+	to {
+		left: 0;
+		transform: translateX(-100%);
+	}
+}
+:deep() {
+	.h-card {
+		position: relative;
+	}
+}
 .leftTop {
 	width: 100%;
 	height: 100%;
-	position: relative;
+	// position: relative;
 	.video-config {
 		position: absolute;
 		top: 1.5%;
@@ -158,7 +379,11 @@ onMounted(async () => {
 		width: 100%;
 		height: 103.255%;
 		transform: translateY(-11px);
-		.videos {
+		:deep(.el-carousel__container) {
+			height: 490px;
+		}
+		.videos,
+		.images {
 			width: 100%;
 			height: 100%;
 			object-fit: fill;
@@ -199,7 +424,21 @@ onMounted(async () => {
 // 	margin: 0 auto;
 // 	margin-top: 8%;
 // }
-
+.not-data {
+	top: 50%;
+	width: 30%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	position: absolute;
+	text-align: center;
+	img {
+		width: 50%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+	}
+}
 .change-video {
 	position: absolute;
 	background: url("@/assets/images/cardImg.png") no-repeat;
diff --git a/src/views/agjtLiveScreen/liveScreen/index.vue b/src/views/agjtLiveScreen/liveScreen/index.vue
index bcaf126..39cafdb 100644
--- a/src/views/agjtLiveScreen/liveScreen/index.vue
+++ b/src/views/agjtLiveScreen/liveScreen/index.vue
@@ -2,11 +2,13 @@
 	<div class="projectContent">
 		<div class="headerContainer">
 			<span>距离完工还有</span>
-			<div class="numberCard" v-for="(item, i) in remainDays" :key="i"><span>{{ item }}</span></div>
+			<div class="numberCard" v-for="(item, i) in remainDays" :key="i">
+				<span>{{ item }}</span>
+			</div>
 			<span style="margin-left: 5px">天</span>
 		</div>
 		<div class="left">
-			<leftTop  class="leftTop" ref="leftTopRef"></leftTop>
+			<leftTop class="leftTop" ref="leftTopRef"></leftTop>
 			<leftCenter class="leftCenter" ref="leftCenterRef"></leftCenter>
 			<leftBottom class="leftBottom" ref="leftBottomRef"></leftBottom>
 		</div>
@@ -37,15 +39,12 @@ import rightCenter from "@/views/agjtLiveScreen/liveScreen/rightCenter.vue";
 import rightBottom from "@/views/agjtLiveScreen/liveScreen/rightBottom.vue";
 import { GlobalStore } from "@/stores";
 import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
-import { ref, onMounted, onBeforeUnmount,nextTick } from "vue";
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { COMPANY } from "@/config/config";
 //引入现场大屏API
-import { 
-	getEnterpriseIdApi,
-	countTaskProgressApi,
- } from "@/api/modules/agjtLiveApi";
+import { getEnterpriseIdApi, countTaskProgressApi } from "@/api/modules/agjtLiveApi";
 const store = GlobalStore();
-const BASEURL = import.meta.env.VITE_API_URL
+const BASEURL = import.meta.env.VITE_API_URL;
 const statisticsCount = ref(null as any);
 
 const projectData = ref(null as any);
@@ -56,26 +55,26 @@ const projectData = ref(null as any);
 // };
 
 //获取项目剩余天数信息
-const remainDays = ref('0' as any)
+const remainDays = ref("0" as any);
 async function countTaskProgress() {
 	//获取企业Id
 	// await getEnterpriseIdApi().then(res => {
 	// 	if(res.success){
-			let data = {
-				// enterpriseId: res.result.id, 
-				// projectSn: '',
-				projectSn: store.sn,
-			}
-			// if(BASEURL == 'http://182.90.224.237:51234' || BASEURL == 'http://192.168.34.221:9111') data.projectSn = 'BD3137498CB84BF0969979E0342CDBCA'
-			// if(BASEURL == 'http://42.180.188.17:9809' || BASEURL == 'http://42.180.188.17:11211') data.projectSn = '471568F45EB247A3912A0D10EA1BFCEB'
-			countTaskProgressApi(data,true).then(res => {
-				if(res.success){
-					remainDays.value = res.result.enterpriseSurplusDayNum.toString()
-				}
-			})
+	let data = {
+		// enterpriseId: res.result.id,
+		// projectSn: '',
+		projectSn: store.sn
+	};
+	// if(BASEURL == 'http://182.90.224.237:51234' || BASEURL == 'http://192.168.34.221:9111') data.projectSn = 'BD3137498CB84BF0969979E0342CDBCA'
+	// if(BASEURL == 'http://42.180.188.17:9809' || BASEURL == 'http://42.180.188.17:11211') data.projectSn = '471568F45EB247A3912A0D10EA1BFCEB'
+	countTaskProgressApi(data, true).then(res => {
+		if (res.success) {
+			remainDays.value = res.result.enterpriseSurplusDayNum.toString();
+		}
+	});
 	// 	}
 	// });
-};
+}
 
 const leftTopRef = ref();
 const leftCenterRef = ref();
@@ -86,45 +85,45 @@ const centerBottomRightRef = ref();
 const rightTopRef = ref();
 const rightCenterRef = ref();
 const rightBottomRef = ref();
-const excuteCount = ref(0)
+const excuteCount = ref(0);
 const callChildFn = async () => {
-	excuteCount.value++
-	nextTick( async ()=>{
-		leftTopRef.value.leftTopMethod()
-		leftCenterRef.value.leftCenterMethod()
-		leftBottomRef.value.leftBottomMethod()
+	excuteCount.value++;
+	nextTick(async () => {
+		leftTopRef.value.leftTopMethod();
+		leftCenterRef.value.leftCenterMethod();
+		leftBottomRef.value.leftBottomMethod();
 		// centerTopRef.value.centerTopMethod()
-		centerBottomLeftRef.value.centerBottomLeftMethod()
-		centerBottomRightRef.value.centerBottomRightMethod()
-		rightTopRef.value.rightTopMethod()
-		rightCenterRef.value.rightCenterMethod()
-		rightBottomRef.value.rightBottomMethod()
-	})
-}
+		centerBottomLeftRef.value.centerBottomLeftMethod();
+		centerBottomRightRef.value.centerBottomRightMethod();
+		rightTopRef.value.rightTopMethod();
+		rightCenterRef.value.rightCenterMethod();
+		rightBottomRef.value.rightBottomMethod();
+	});
+};
 //定时器
 const interval = ref(null as any);
 //定时调用
 const startInterval = async () => {
-	interval.value= setInterval(() => {
+	interval.value = setInterval(() => {
 		// callChildFn();
 	}, 5 * 1000);
-}
+};
 // 在组件销毁时清除 interval
 const destroyInterval = () => {
 	if (interval.value) {
 		clearInterval(interval.value);
-  }
-}
+	}
+};
 // 在组件销毁时调用 destroyInterval 方法清除 interval
 onBeforeUnmount(() => {
 	destroyInterval();
-})
-window.onbeforeunload = (e) => {
+});
+window.onbeforeunload = e => {
 	destroyInterval();
-}
-onMounted( async () => {
+};
+onMounted(async () => {
 	startInterval();
-	countTaskProgress()
+	countTaskProgress();
 });
 </script>
 <style lang="scss" scoped>
@@ -134,26 +133,28 @@ onMounted( async () => {
 	display: flex;
 	.left {
 		width: 26%;
+		margin-top: 3%;
 		.leftTop {
-			height: 32%;
+			height: 31%;
 		}
 		.leftCenter {
-			height: 33%;
+			height: 32%;
 			margin: 3% 0 3% 0;
 		}
 		.leftBottom {
-			height: 35.25%;
+			height: 35%;
 		}
 	}
 	.center {
 		width: 46%;
 		margin: 0 1%;
+		// margin-top: 2%;
 
 		.centerTop {
-			height: 66%;
+			height: 64.3%;
 			margin-bottom: 2.1%;
 		}
-		.centerBottom{
+		.centerBottom {
 			height: 100%;
 			width: 100%;
 			display: flex;
@@ -170,12 +171,12 @@ onMounted( async () => {
 	}
 	.right {
 		width: 26%;
-
+		margin-top: 3.3%;
 		.rightTop {
-			height: 32%;
+			height: 31%;
 		}
 		.rightCenter {
-			height: 33%;
+			height: 32%;
 			margin: 3% 0 3% 0;
 		}
 		.rightBottom {
@@ -184,13 +185,13 @@ onMounted( async () => {
 		}
 	}
 }
-.headerContainer{
+.headerContainer {
 	display: flex;
 	color: #fff;
 	font-size: 18px;
 	position: absolute;
 	transform: translateY(-53px);
-	align-items: center;	
+	align-items: center;
 	.numberCard {
 		font-size: 20px;
 		width: 12px;
diff --git a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
index c0c2e92..49dd920 100644
--- a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
+++ b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
@@ -174,6 +174,7 @@ function drawPie(pieNum: number, pieInfo: any) {
 					bottom: "5%",
 					containLabel: true
 				},
+				center: ["50%", "42%"],
 				name: "innerPie",
 				type: "pie",
 				selectedMode: "single",
@@ -190,6 +191,7 @@ function drawPie(pieNum: number, pieInfo: any) {
 			{
 				name: "pieCircle",
 				type: "pie",
+				center: ["50%", "42%"],
 				radius: ["45%", "60%"],
 				minAngle: 50,
 				labelLine: {
diff --git a/src/views/commandScreen/dialogCompnnents/progress-tree.vue b/src/views/commandScreen/dialogCompnnents/progress-tree.vue
new file mode 100644
index 0000000..16333bd
--- /dev/null
+++ b/src/views/commandScreen/dialogCompnnents/progress-tree.vue
@@ -0,0 +1,494 @@
+<template>
+	<div class="row-groups" :class="{ open: p.openedIndex === p.id }" v-for="(p, i) in props.treeData" :key="p.taskName">
+		<div class="row">
+			<div class="td fixed_1" @click="handleOpen(p.id, p)" style="color: #fff; padding-left: 25px">
+				<el-icon
+					size="16"
+					v-if="p.openedIndex === p.id && p.children.length > 0"
+					:style="{
+						visibility: p.openedIndex === p.id && p.children.length > 0 ? 'visible' : 'hidden'
+					}"
+					><caret-bottom
+				/></el-icon>
+				<el-icon
+					size="16"
+					v-else
+					:style="{
+						visibility: p.openedIndex != p.id && p.children.length > 0 ? 'visible' : 'hidden'
+					}"
+					><caret-right
+				/></el-icon>
+				<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
+					<span>{{ p.taskName }}</span>
+				</el-tooltip>
+			</div>
+			<div class="td fixed_2">{{ p.startDate }}</div>
+			<div class="td fixed_3">{{ p.finishDate }}</div>
+			<div class="td" v-for="date in props.dateList" :key="date + 'grid-date'">
+				<div class="grids">
+					<div
+						class="grid"
+						v-for="day in getDays(date)"
+						:key="'grid' + day.num"
+						:ref="(el: any) => setItemRef(el, p.id + '@|@' + day.date)"
+					></div>
+				</div>
+			</div>
+			<div
+				class="progress"
+				:style="gantt"
+				v-for="(gantt, index) in p.gantts"
+				:key="index"
+				:title="p.taskName + ' ' + headerList[p.status].label"
+				@click="openGanttDialog(p)"
+			></div>
+		</div>
+		<!-- 第二层 -->
+		<div v-if="p.openedIndex === p.id && p.children.length > 0">
+			<myTree :treeData="p.children" :dateList="props.dateList"></myTree>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import myTree from "@/views/commandScreen/dialogCompnnents/progress-tree.vue";
+import { ref, watch, nextTick, reactive, onMounted } from "vue";
+const props = defineProps(["treeData", "dateList"]);
+
+// 甘特图详情弹窗
+const ganttDetailRef = ref();
+const openGanttDialog = (type: any) => {
+	ganttDetailRef.value.openDialog(type);
+	// console.log(ganttDetailRef.value);
+};
+
+const headerList = reactive([
+	{ label: "未开始", color: "#35e5fd" },
+	{ label: "进行中", color: "#f1d520" },
+	{ label: "已完成", color: "#4fd389" },
+	{ label: "已逾期", color: "#F80840" }
+	// { label: "逾期未开始", color: "#F80840" },
+	// { label: "逾期进行中", color: "#fc6f8e" },
+	// { label: "逾期已完成", color: "#C13F5B" }
+]);
+const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#F80840"] as any);
+
+const itemRefs = [] as any[];
+const setItemRef = (el: any, va: any) => {
+	if (el) {
+		const b = va.split("@|@");
+
+		const dataItem = {
+			refData: va,
+			item: el
+		};
+		if (itemRefs.length == 0) {
+			const itemList = [];
+			itemList.push(dataItem);
+			const data = {
+				name: b[0],
+				itemS: itemList
+			};
+			itemRefs.push(data);
+		} else {
+			let isCheck = true;
+			for (let index = 0; index < itemRefs.length; index++) {
+				const element = itemRefs[index];
+				if (element.name === b) {
+					isCheck = false;
+					element.itemS.push(dataItem);
+					break;
+				}
+			}
+			if (isCheck) {
+				const itemList = [];
+				itemList.push(dataItem);
+				const data = {
+					name: b[0],
+					itemS: itemList
+				};
+				itemRefs.push(data);
+			}
+		}
+	}
+};
+
+const getGanttStyle = (project: any) => {
+	// console.log("进入 getGanttStyle --- ", project);
+	let { startDate, finishDate, id } = project;
+	const startArr = startDate.split("-");
+	const endArr = finishDate.split("-");
+	let startRef = null;
+	let endRef = null;
+	// 抹灰工程1-1-2022/09/03
+
+	const a = true;
+	// console.log(a, ":!(startArr[2] % 2:");
+	if (a) {
+		const day = +startArr[2];
+		startArr[2] = day < 10 ? "0" + day : day;
+		startDate = startArr.join("-");
+	}
+	const b = true;
+	// console.log(a, ":!(endArr[2] % 2):");
+	if (b) {
+		const day = +endArr[2];
+		endArr[2] = day < 10 ? "0" + day : day;
+		finishDate = endArr.join("-");
+	}
+
+	// const a = !(startArr[2] % 2);
+	// if (a) {
+	// 	const day = startArr[2] - 1;
+	// 	startArr[2] = day < 10 ? "0" + day : day;
+	// 	startDate = startArr.join("-");
+	// }
+	// const b = !(endArr[2] % 2);
+	// if (!(endArr[2] % 2)) {
+	// 	const day = endArr[2] - 1;
+	// 	endArr[2] = day < 10 ? "0" + day : day;
+	// 	finishDate = endArr.join("-");
+	// }
+
+	// for (let index = 0; index < itemRefs.length; index++) {
+	// 	const data = itemRefs[index];
+	// 	// console.log(data, "循环里面甘特图", id);
+	// 	if (data.name === id) {
+	// 		for (let index = 0; index < data.itemS.length; index++) {
+	// 			const element = data.itemS[index];
+	// 			if (element.refData === id + "@|@" + startDate) {
+	// 				startRef = data.itemS[index].item;
+	// 			}
+
+	// 			if (element.refData === id + "@|@" + finishDate) {
+	// 				endRef = data.itemS[index].item;
+	// 			}
+	// 		}
+	// 	}
+	// }
+	itemRefs.reduce((prev, item: any) => {
+		if (item.name !== id) return prev;
+		item.itemS.forEach((ele: any) => {
+			if (ele.refData === id + "@|@" + startDate) {
+				startRef = ele.item;
+			}
+
+			if (ele.refData === id + "@|@" + finishDate) {
+				endRef = ele.item;
+			}
+		});
+		return prev;
+	}, []);
+	// console.log(startRef, endRef, "甘特图");
+
+	const startLeft = startRef?.offsetLeft;
+
+	const endWidth = endRef?.offsetWidth;
+
+	const endLeft = endRef?.offsetLeft;
+	const ganttWidth = endLeft - startLeft + endWidth;
+
+	return { left: startLeft + "px", width: ganttWidth + "px" };
+};
+const configGantts = (projects: any) => {
+	// console.log("进入渲染 setGantts -- ", projects);
+	projects.forEach((project: any) => {
+		let { finishDate, name, gantts } = project;
+		const gantt = getGanttStyle(project);
+		if (gantt.background) return;
+		// gantt.background = colors.value[project.state - 1];
+		gantt.background = colors.value[project.mppStatus];
+		if (gantts) {
+			gantts.push(gantt);
+		} else {
+			project.gantts = [gantt];
+			project.openedIndex = 9999;
+		}
+		console.log(1111, project.delay);
+		// if (project.delay) {
+		// 	const delayStartTime = increaseDate(finishDate, 1);
+		// 	const delayEndTime = increaseDate(finishDate, project.delay);
+		// 	if (!gantts.background) {
+		// 		const gantt = getGanttStyle({
+		// 		startDate: delayStartTime,
+		// 		finishDate: delayEndTime,
+		// 		name
+		// 		});
+		// 		gantt.background = colors.value[3];
+		// 		gantts.push(gantt);
+		// 	}
+		// }
+		if (project.children.length > 0) {
+			project.children && configGantts(project.children);
+		}
+	});
+};
+const setGantts = () => {
+	if (props.treeData.length == 0) return;
+	configGantts(props.treeData);
+};
+const increaseDate = (date: any, delay: any) => {
+	const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
+	return new Date(timestamp).toISOString().replace(/-/g, "-").slice(0, 10);
+};
+const getDays = (date: any) => {
+	const year = date.split("-")[0];
+	const month = +date.split("-")[1];
+	const large = [1, 3, 5, 7, 8, 10, 12];
+	const normal = [4, 6, 9, 11];
+	const small = [2];
+	let count = 0;
+	switch (true) {
+		case large.includes(month):
+			count = 31;
+			break;
+		case normal.includes(month):
+			count = 30;
+			break;
+		case small.includes(month):
+			count = year % 4 ? 28 : 29;
+			break;
+	}
+
+	return (() => {
+		const days = new Array(count).fill(0).map((item, index) => {
+			let num = index + 1;
+			let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
+			return { num, date: fulldate };
+		});
+		// .filter(item => item.num % 2);
+		if (count === 28) {
+			days.push({ num: 28, date: date + "-28" });
+		} else if (count === 30) {
+			days.push({ num: 30, date: date + "-30" });
+		}
+		return days;
+	})();
+};
+onMounted(() => {
+	nextTick(() => {
+		setGantts();
+	});
+});
+const handleOpen = (index: any, children: any) => {
+	// console.log(666);
+	console.log(index);
+	// console.log(openedIndex.value);
+	if (index === children.openedIndex) {
+		children.openedIndex = 9999;
+	} else {
+		children.openedIndex = index;
+	}
+	// nextTick(() => {
+	// 	setGantts(children);
+	// });
+	// setTimeout(() => {
+	// 	setGantts(children);
+	// }, 300);
+};
+</script>
+
+<style lang="scss" scoped>
+.row-groups {
+	position: relative;
+	height: 42px;
+	// &::before {
+	// 	content: "";
+	// 	position: absolute;
+	// 	left: 26px;
+	// 	top: 16px;
+	// 	width: 0;
+	// 	height: 0;
+	// 	border-top: 4px solid transparent;
+	// 	border-right: 4px solid transparent;
+	// 	border-bottom: 4px solid transparent;
+	// 	border-left: 4px solid #5be1f4;
+	// 	z-index: 99;
+	// }
+
+	&.open {
+		height: unset;
+
+		// &::before {
+		// 	border-left-color: transparent;
+		// 	border-top-color: #5be1f4;
+		// }
+	}
+
+	> .row .td:first-child {
+		user-select: none;
+		cursor: pointer;
+	}
+
+	.row {
+		position: relative;
+		display: flex;
+		border-top: 1px solid #3e5a8d;
+		.fixed_1,
+		.fixed_2,
+		.fixed_3 {
+			width: 200px;
+			position: relative;
+			background: #11306a;
+			z-index: 10;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.fixed_1 {
+			left: 0;
+			border-left: 1px solid #3e5a8d;
+		}
+		.fixed_2 {
+			left: 0px;
+		}
+		.fixed_3 {
+			left: 0px;
+		}
+		.td {
+			flex-shrink: 0;
+			box-sizing: border-box;
+			height: 42px;
+			line-height: 42px;
+			// background-color: #fff;
+			border-right: 1px solid #3e5a8d;
+			border-bottom: 1px solid #3e5a8d;
+			border-top: 1px solid #3e5a8d;
+			color: #fff;
+			font-size: 16px;
+
+			.grids {
+				height: 100%;
+				display: flex;
+
+				.grid {
+					position: relative;
+					// flex: 1;
+					width: 26px;
+					height: 100%;
+
+					&:not(:last-child) {
+						width: 25px;
+						border-right: 1px solid #3e5a8d;
+					}
+				}
+			}
+
+			&:nth-child(1) {
+				padding-left: 40px;
+				width: 200px;
+			}
+
+			&:not(:nth-child(1)) {
+				width: 100px;
+				font-size: 14px;
+				text-align: center;
+			}
+
+			&:nth-child(n + 4) {
+				// width: 600px;
+				width: initial;
+			}
+		}
+
+		.progress {
+			// flex-shrink: 0;
+			position: absolute;
+			top: calc(50% - 7px);
+			width: 20px;
+			height: 14px;
+			cursor: pointer;
+			background: #557dee;
+		}
+	}
+
+	.children {
+		.td {
+			height: 38px;
+			line-height: 38px;
+			font-size: 14px;
+		}
+		.row {
+			position: relative;
+			display: flex;
+			border-top: 1px solid #3e5a8d;
+			.fixed_1,
+			.fixed_2,
+			.fixed_3 {
+				width: 200px;
+				position: relative;
+				background: #11306a;
+				z-index: 10;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+			.fixed_1 {
+				left: 0;
+				border-left: 1px solid #3e5a8d;
+			}
+			.fixed_2 {
+				left: 0px;
+			}
+			.fixed_3 {
+				left: 0px;
+			}
+			.td {
+				flex-shrink: 0;
+				box-sizing: border-box;
+				height: 42px;
+				line-height: 42px;
+				// background-color: #fff;
+				border-right: 1px solid #3e5a8d;
+				border-bottom: 1px solid #3e5a8d;
+				border-top: 1px solid #3e5a8d;
+				color: #fff;
+				font-size: 16px;
+
+				.grids {
+					height: 100%;
+					display: flex;
+
+					.grid {
+						position: relative;
+						// flex: 1;
+						width: 26px;
+						height: 100%;
+
+						&:not(:last-child) {
+							width: 25px;
+							border-right: 1px solid #3e5a8d;
+						}
+					}
+				}
+
+				&:nth-child(1) {
+					padding-left: 40px;
+					width: 200px;
+				}
+
+				&:not(:nth-child(1)) {
+					width: 100px;
+					font-size: 14px;
+					text-align: center;
+				}
+
+				&:nth-child(n + 4) {
+					// width: 400px;
+					width: initial;
+				}
+			}
+
+			.progress {
+				flex-shrink: 0;
+				position: absolute;
+				top: calc(50% - 7px);
+				width: 20px;
+				height: 14px;
+				cursor: pointer;
+				background: #557dee;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/commandScreen/dialogCompnnents/weather-info.vue b/src/views/commandScreen/dialogCompnnents/weather-info.vue
index 61a13f7..3560de5 100644
--- a/src/views/commandScreen/dialogCompnnents/weather-info.vue
+++ b/src/views/commandScreen/dialogCompnnents/weather-info.vue
@@ -174,474 +174,7 @@
 							</div>
 						</div>
 						<div class="tbody">
-							<div class="row-groups" :class="{ open: openedIndex === p.id }" v-for="(p, i) in projects" :key="p.taskName">
-								<div class="row">
-									<div class="td fixed_1" @click="handleOpen(p.id)" style="color: #fff; padding-left: 25px">
-										<el-icon
-											size="16"
-											v-if="openedIndex === p.id && p.children.length > 0"
-											:style="{ visibility: openedIndex === p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
-											><caret-bottom
-										/></el-icon>
-										<el-icon
-											size="16"
-											v-else
-											:style="{ visibility: openedIndex != p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
-											><caret-right
-										/></el-icon>
-										<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
-											<span>{{ p.taskName }}</span>
-										</el-tooltip>
-									</div>
-									<div class="td fixed_2">{{ p.startDate }}</div>
-									<div class="td fixed_3">{{ p.finishDate }}</div>
-									<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-										<div class="grids">
-											<div
-												class="grid"
-												v-for="day in getDays(date)"
-												:key="'grid' + day.num"
-												:ref="(el: any) => setItemRef(el, p.id + '@|@' + day.date)"
-											></div>
-										</div>
-									</div>
-									<div
-										class="progress"
-										:style="gantt"
-										v-for="(gantt, index) in p.gantts"
-										:key="index"
-										:title="p.taskName + ' ' + headerList[p.status].label"
-										@click="openGanttDialog(p)"
-									></div>
-								</div>
-								<!-- 第二层 -->
-								<div class="children" v-if="openedIndex === p.id" v-for="child in p.children" :key="'child-' + child.taskName">
-									<div class="row">
-										<div class="td fixed_1" @click="handleOpenSecond(child.id)" style="color: #fff; padding-left: 25px">
-											<el-icon
-												size="16"
-												v-if="openedIndexSecond === child.id && child.children.length > 0"
-												:style="{
-													visibility: openedIndexSecond === child.id && child.children.length > 0 ? 'visible' : 'hidden'
-												}"
-												><caret-bottom
-											/></el-icon>
-											<el-icon
-												size="16"
-												v-else
-												:style="{ visibility: openedIndexSecond != child.id && child.children.length > 0 ? 'visible' : 'hidden' }"
-												><caret-right
-											/></el-icon>
-											<el-tooltip effect="dark" :content="child.taskName" placement="top-start">
-												<span>{{ child.taskName }}</span>
-											</el-tooltip>
-										</div>
-										<div class="td fixed_2">{{ child.startDate }}</div>
-										<div class="td fixed_3">{{ child.finishDate }}</div>
-										<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-											<div class="grids">
-												<div
-													class="grid"
-													v-for="day in getDays(date)"
-													:key="'grid' + day.num"
-													:ref="(el: any) => setItemRef(el, child.id + '@|@' + day.date)"
-												></div>
-											</div>
-										</div>
-										<div
-											class="progress"
-											:style="gantt"
-											v-for="(gantt, index) in child.gantts"
-											:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-										></div>
-											<!-- @mouseenter="e => handleHover(e, child)"
-											@mouseleave="handleLeave" -->
-									</div>
-
-									<!-- 第三层 -->
-									<div
-										class="children"
-										v-if="openedIndexSecond === child.id"
-										v-for="second in child.children"
-										:key="'child-' + second.taskName"
-									>
-										<div class="row">
-											<div class="td fixed_1" @click="handleOpenThird(second.id)" style="color: #fff; padding-left: 25px">
-												<el-icon
-													size="16"
-													v-if="openedIndexThird === second.id && second.children.length > 0"
-													:style="{
-														visibility: openedIndexThird === second.id && second.children.length > 0 ? 'visible' : 'hidden'
-													}"
-													><caret-bottom
-												/></el-icon>
-												<el-icon
-													size="16"
-													v-else
-													:style="{
-														visibility: openedIndexThird != second.id && second.children.length > 0 ? 'visible' : 'hidden'
-													}"
-													><caret-right
-												/></el-icon>
-												<el-tooltip effect="dark" :content="second.taskName" placement="top-start">
-													<span>{{ second.taskName }}</span>
-												</el-tooltip>
-											</div>
-
-											<div class="td fixed_2">{{ second.startDate }}</div>
-											<div class="td fixed_3">{{ second.finishDate }}</div>
-											<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-												<div class="grids">
-													<div
-														class="grid"
-														v-for="day in getDays(date)"
-														:key="'grid' + day.num"
-														:ref="(el: any) => setItemRef(el, second.id + '@|@' + day.date)"
-													></div>
-												</div>
-											</div>
-											<div
-												class="progress"
-												:style="gantt"
-												v-for="(gantt, index) in second.gantts"
-												:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-											></div>
-												<!-- @mouseenter="e => handleHover(e, second)"
-												@mouseleave="handleLeave" -->
-										</div>
-
-										<!-- 第四层 -->
-										<div
-											class="children"
-											v-if="openedIndexThird === second.id"
-											v-for="third in second.children"
-											:key="'child-' + third.taskName"
-										>
-											<div class="row">
-												<div class="td fixed_1" @click="handleOpenFourth(third.id)" style="color: #fff; padding-left: 25px">
-													<el-icon
-														size="16"
-														v-if="openedIndexFourth === third.id && third.children.length > 0"
-														:style="{
-															visibility: openedIndexFourth === third.id && third.children.length > 0 ? 'visible' : 'hidden'
-														}"
-														><caret-bottom
-													/></el-icon>
-													<el-icon
-														size="16"
-														v-else
-														:style="{
-															visibility: openedIndexFourth != third.id && third.children.length > 0 ? 'visible' : 'hidden'
-														}"
-														><caret-right
-													/></el-icon>
-													<el-tooltip effect="dark" :content="third.taskName" placement="top-start">
-														<span>{{ third.taskName }}</span>
-													</el-tooltip>
-												</div>
-
-												<div class="td fixed_2">{{ third.startDate }}</div>
-												<div class="td fixed_3">{{ third.finishDate }}</div>
-												<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-													<div class="grids">
-														<div
-															class="grid"
-															v-for="day in getDays(date)"
-															:key="'grid' + day.num"
-															:ref="(el: any) => setItemRef(el, third.id + '@|@' + day.date)"
-														></div>
-													</div>
-												</div>
-												<div
-													class="progress"
-													:style="gantt"
-													v-for="(gantt, index) in third.gantts"
-													:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-												></div>
-													<!-- @mouseenter="e => handleHover(e, third)"
-													@mouseleave="handleLeave" -->
-											</div>
-
-											<!-- 第五层 -->
-											<div
-												class="children"
-												v-if="openedIndexFourth === third.id"
-												v-for="fouth in third.children"
-												:key="'child-' + fouth.taskName"
-											>
-												<div class="row">
-													<div class="td fixed_1" @click="handleOpenFifth(fouth.id)" style="color: #fff; padding-left: 25px">
-														<el-icon
-															size="16"
-															v-if="openedIndexFifth === fouth.id && fouth.children.length > 0"
-															:style="{
-																visibility: openedIndexFifth === fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
-															}"
-															><caret-bottom
-														/></el-icon>
-														<el-icon
-															size="16"
-															v-else
-															:style="{
-																visibility: openedIndexFifth != fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
-															}"
-															><caret-right
-														/></el-icon>
-														<el-tooltip effect="dark" :content="fouth.taskName" placement="top-start">
-															<span>{{ fouth.taskName }}</span>
-														</el-tooltip>
-													</div>
-
-													<div class="td fixed_2">{{ fouth.startDate }}</div>
-													<div class="td fixed_3">{{ fouth.finishDate }}</div>
-													<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-														<div class="grids">
-															<div
-																class="grid"
-																v-for="day in getDays(date)"
-																:key="'grid' + day.num"
-																:ref="(el: any) => setItemRef(el, fouth.id + '@|@' + day.date)"
-															></div>
-														</div>
-													</div>
-													<div
-														class="progress"
-														:style="gantt"
-														v-for="(gantt, index) in fouth.gantts"
-														:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-													></div>
-														<!-- @mouseenter="e => handleHover(e, fouth)"
-														@mouseleave="handleLeave" -->
-												</div>
-
-												<!-- 第六层 -->
-												<div
-													class="children"
-													v-if="openedIndexFifth === fouth.id"
-													v-for="fifth in fouth.children"
-													:key="'child-' + fifth.taskName"
-												>
-													<div class="row">
-														<div class="td fixed_1" @click="handleOpenSixth(fifth.id)" style="color: #fff; padding-left: 25px">
-															<el-icon
-																size="16"
-																v-if="openedIndexSixth === fifth.id && fifth.children.length > 0"
-																:style="{
-																	visibility: openedIndexSixth === fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
-																}"
-																><caret-bottom
-															/></el-icon>
-															<el-icon
-																size="16"
-																v-else
-																:style="{
-																	visibility: openedIndexSixth != fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
-																}"
-																><caret-right
-															/></el-icon>
-															<el-tooltip effect="dark" :content="fifth.taskName" placement="top-start">
-																<span>{{ fifth.taskName }}</span>
-															</el-tooltip>
-														</div>
-														<div class="td fixed_2">{{ fifth.startDate }}</div>
-														<div class="td fixed_3">{{ fifth.finishDate }}</div>
-														<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-															<div class="grids">
-																<div
-																	class="grid"
-																	v-for="day in getDays(date)"
-																	:key="'grid' + day.num"
-																	:ref="(el: any) => setItemRef(el, fifth.id + '@|@' + day.date)"
-																></div>
-															</div>
-														</div>
-														<div
-															class="progress"
-															:style="gantt"
-															v-for="(gantt, index) in fifth.gantts"
-															:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-														></div>
-															<!-- @mouseenter="e => handleHover(e, fifth)"
-															@mouseleave="handleLeave" -->
-													</div>
-
-													<!-- 第七层 -->
-													<div
-														class="children"
-														v-if="openedIndexSixth === fifth.id"
-														v-for="sixth in fifth.children"
-														:key="'child-' + sixth.taskName"
-													>
-														<div class="row">
-															<div class="td fixed_1" @click="handleOpenSeven(sixth.id)" style="color: #fff; padding-left: 25px">
-																<el-icon
-																	size="16"
-																	v-if="openedIndexSixth === sixth.id && sixth.children.length > 0"
-																	:style="{
-																		visibility: openedIndexSixth === sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
-																	}"
-																	><caret-bottom
-																/></el-icon>
-																<el-icon
-																	size="16"
-																	v-else
-																	:style="{
-																		visibility: openedIndexSixth != sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
-																	}"
-																	><caret-right
-																/></el-icon>
-																<el-tooltip effect="dark" :content="sixth.taskName" placement="top-start">
-																	<span>{{ sixth.taskName }}</span>
-																</el-tooltip>
-															</div>
-															<div class="td fixed_2">{{ sixth.startDate }}</div>
-															<div class="td fixed_3">{{ sixth.finishDate }}</div>
-															<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-																<div class="grids">
-																	<div
-																		class="grid"
-																		v-for="day in getDays(date)"
-																		:key="'grid' + day.num"
-																		:ref="(el: any) => setItemRef(el, sixth.id + '@|@' + day.date)"
-																	></div>
-																</div>
-															</div>
-															<div
-																class="progress"
-																:style="gantt"
-																v-for="(gantt, index) in sixth.gantts"
-																:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-															></div>
-																<!-- @mouseenter="e => handleHover(e, sixth)"
-																@mouseleave="handleLeave" -->
-														</div>
-
-														<!-- 第八层 -->
-														<div
-															class="children"
-															v-if="openedIndexSeven === sixth.id"
-															v-for="seventh in sixth.children"
-															:key="'child-' + seventh.taskName"
-														>
-															<div class="row">
-																<div
-																	class="td fixed_1"
-																	@click="handleOpenEighth(seventh.id)"
-																	style="color: #fff; padding-left: 25px"
-																>
-																	<el-icon
-																		size="16"
-																		v-if="openedIndexSeven === seventh.id && seventh.children.length > 0"
-																		:style="{
-																			visibility:
-																				openedIndexSeven === seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
-																		}"
-																		><caret-bottom
-																	/></el-icon>
-																	<el-icon
-																		size="16"
-																		v-else
-																		:style="{
-																			visibility:
-																				openedIndexSeven != seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
-																		}"
-																		><caret-right
-																	/></el-icon>
-																	<el-tooltip effect="dark" :content="seventh.taskName" placement="top-start">
-																		<span>{{ seventh.taskName }}</span>
-																	</el-tooltip>
-																</div>
-																<div class="td fixed_2">{{ seventh.startDate }}</div>
-																<div class="td fixed_3">{{ seventh.finishDate }}</div>
-																<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-																	<div class="grids">
-																		<div
-																			class="grid"
-																			v-for="day in getDays(date)"
-																			:key="'grid' + day.num"
-																			:ref="(el: any) => setItemRef(el, seventh.id + '@|@' + day.date)"
-																		></div>
-																	</div>
-																</div>
-																<div
-																	class="progress"
-																	:style="gantt"
-																	v-for="(gantt, index) in seventh.gantts"
-																	:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-																></div>
-																	<!-- @mouseenter="e => handleHover(e, seventh)"
-																	@mouseleave="handleLeave" -->
-															</div>
-
-															<!-- 第九层 -->
-															<div
-																class="children"
-																v-if="openedIndexEighth === seventh.id"
-																v-for="eighth in seventh.children"
-																:key="'child-' + eighth.taskName"
-															>
-																<div class="row">
-																	<div class="td fixed_1" style="color: #fff; padding-left: 25px">
-																		<el-icon
-																			size="16"
-																			v-if="openedIndexEighth === eighth.id && eighth.children.length > 0"
-																			:style="{
-																				visibility:
-																					openedIndexEighth === eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
-																			}"
-																			><caret-bottom
-																		/></el-icon>
-																		<el-icon
-																			size="16"
-																			v-else
-																			:style="{
-																				visibility:
-																					openedIndexEighth != eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
-																			}"
-																			><caret-right
-																		/></el-icon>
-																		<el-tooltip effect="dark" :content="eighth.taskName" placement="top-start">
-																			<span>{{ eighth.taskName }}</span>
-																		</el-tooltip>
-																	</div>
-																	<div class="td fixed_2">{{ eighth.startDate }}</div>
-																	<div class="td fixed_3">{{ eighth.finishDate }}</div>
-																	<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
-																		<div class="grids">
-																			<div
-																				class="grid"
-																				v-for="day in getDays(date)"
-																				:key="'grid' + day.num"
-																				:ref="(el: any) => setItemRef(el, eighth.id + '@|@' + day.date)"
-																			></div>
-																		</div>
-																	</div>
-																	<div
-																		class="progress"
-																		:style="gantt"
-																		v-for="(gantt, index) in eighth.gantts"
-																		:key="index"
-											:title="child.taskName + ' ' + headerList[child.status].label"
-																	></div>
-																		<!-- @mouseenter="e => handleHover(e, eighth)"
-																		@mouseleave="handleLeave" -->
-																</div>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
+							<myTree :treeData="projects" :dateList="dateList"></myTree>
 						</div>
 						<div class="tooltips" :style="tooltipsStyle">
 							{{ tooltipContent.taskName }}
@@ -669,6 +202,7 @@
 </template>
 
 <script lang="ts" setup>
+import myTree from "@/views/commandScreen/dialogCompnnents/progress-tree.vue";
 import { ref, onMounted, watch, nextTick, reactive, computed, onBeforeMount } from "vue";
 import { ElMessage } from "element-plus";
 import { GlobalStore } from "@/stores";
@@ -702,8 +236,8 @@ function handleChangeTab(val: any) {
 		partyMemberList.value = [];
 		pageNo.value = 1;
 	} else {
-		selectVal.value = ''
-		treeData.value = ''
+		selectVal.value = "";
+		treeData.value = "";
 		getHierarchyEnterpriseList();
 		// getCountFn();
 		// getDataList();
@@ -886,9 +420,11 @@ const getHierarchyEnterpriseList = async () => {
 					// selectVal.value = level1CompanyData.value[0].enterpriseName;
 					// tree.value.setCurrentKey(level1CompanyData.value[0].id);//换掉tree
 					// groupTree.value.setCurrentKey(level1CompanyData.value[0].id);
-					getDataList(); //123
-					getCountFn();//123
+					// getDataList(); //123
+					// getCountFn(); //123
 				});
+				getDataList(); //123
+				getCountFn(); //123
 			}
 			// this.enterpriseTreeData = res.result
 		}
@@ -913,7 +449,7 @@ const headerList = reactive([
 	// { label: "逾期进行中", color: "#fc6f8e" },
 	// { label: "逾期已完成", color: "#C13F5B" }
 ]);
-const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#F80840"] as any);
+
 const projects = ref([] as any);
 // const projects = ref([
 // 	{
@@ -972,62 +508,14 @@ const projects = ref([] as any);
 // 	}
 // ]);
 
-const itemRefs = [];
 // 点击抽屉的工程名称更新页面
 const onUpdate = async () => {
 	getDataList();
 	ElMessage.success("页面已更新");
 };
-const setItemRef = (el: any, va: any) => {
-	if (el) {
-		const b = va.split("@|@");
 
-		const dataItem = {
-			refData: va,
-			item: el
-		};
-		if (itemRefs.length == 0) {
-			const itemList = [];
-			itemList.push(dataItem);
-			const data = {
-				name: b[0],
-				itemS: itemList
-			};
-			itemRefs.push(data);
-		} else {
-			let isCheck = true;
-			for (let index = 0; index < itemRefs.length; index++) {
-				const element = itemRefs[index];
-				if (element.name === b) {
-					isCheck = false;
-					element.itemS.push(dataItem);
-					break;
-				}
-			}
-			if (isCheck) {
-				const itemList = [];
-				itemList.push(dataItem);
-				const data = {
-					name: b[0],
-					itemS: itemList
-				};
-				itemRefs.push(data);
-			}
-		}
-	}
-};
 const scrollLeft = ref(0);
 const scrollTimer = ref(0);
-const openedIndex = ref(9999);
-const openedIndexSecond = ref(9999);
-const openedIndexThird = ref(9999);
-const openedIndexFourth = ref(9999);
-const openedIndexFifth = ref(9999);
-const openedIndexSixth = ref(9999);
-const openedIndexSeven = ref(9999);
-const openedIndexEighth = ref(9999);
-const openedIndexNinth = ref(9999);
-const openedIndexTenth = ref(9999);
 
 const tooltipsStyle = ref({
 	display: "none",
@@ -1060,18 +548,15 @@ const tooltipContent = ref({
 // 	}, 300);
 // };
 
-function getDataList() {
+const getDataList = () => {
 	getXzParentChildTaskListApi({
 		projectSn: searchSn.value,
 		enterpriseId: treeData.value.id
 	}).then(res => {
 		projects.value = dealArr(res.result);
 		// console.log("获取甘特图数据", projects.value);
-		setTimeout(function () {
-			setGantts();
-		}, 300);
 	});
-}
+};
 
 const dealArr = arr => {
 	arr.map(item => {
@@ -1096,100 +581,6 @@ watch(
 onBeforeMount(() => {
 	searchSn.value = store.sn;
 });
-const getGanttStyle = (project: any) => {
-	// console.log("进入 getGanttStyle --- ", project);
-	let { startDate, finishDate, id } = project;
-	const startArr = startDate.split("-");
-	const endArr = finishDate.split("-");
-	let startRef = null;
-	let endRef = null;
-	// 抹灰工程1-1-2022/09/03
-
-	const a = true;
-  // console.log(a, ":!(startArr[2] % 2:");
-  if (a) {
-    const day = +startArr[2];
-    startArr[2] = day < 10 ? "0" + day : day;
-    startDate = startArr.join("-");
-  }
-  const b = true;
-  // console.log(a, ":!(endArr[2] % 2):");
-  if (b) {
-    const day = +endArr[2];
-    endArr[2] = day < 10 ? "0" + day : day;
-    finishDate = endArr.join("-");
-  }
-
-	// const a = !(startArr[2] % 2);
-	// if (a) {
-	// 	const day = startArr[2] - 1;
-	// 	startArr[2] = day < 10 ? "0" + day : day;
-	// 	startDate = startArr.join("-");
-	// }
-	// const b = !(endArr[2] % 2);
-	// if (!(endArr[2] % 2)) {
-	// 	const day = endArr[2] - 1;
-	// 	endArr[2] = day < 10 ? "0" + day : day;
-	// 	finishDate = endArr.join("-");
-	// }
-
-
-	for (let index = 0; index < itemRefs.length; index++) {
-		const data = itemRefs[index];
-		// console.log(data, "循环里面甘特图", id);
-		if (data.name === id) {
-			for (let index = 0; index < data.itemS.length; index++) {
-				const element = data.itemS[index];
-				if (element.refData === id + "@|@" + startDate) {
-					startRef = data.itemS[index].item;
-				}
-
-				if (element.refData === id + "@|@" + finishDate) {
-					endRef = data.itemS[index].item;
-				}
-			}
-		}
-	}
-	// console.log(startRef, endRef, "甘特图");
-
-	const startLeft = startRef?.offsetLeft;
-
-	const endWidth = endRef?.offsetWidth;
-
-	const endLeft = endRef?.offsetLeft;
-	const ganttWidth = endLeft - startLeft + endWidth;
-
-	return { left: startLeft + "px", width: ganttWidth + "px" };
-};
-const setGantts = () => {
-	const configGantts = (projects: any) => {
-		// console.log("进入渲染 setGantts -- ", projects);
-		projects.map(project => {
-			let { finishDate, name, gantts } = project;
-			const gantt = getGanttStyle(project);
-			// gantt.background = colors.value[project.state - 1];
-			gantt.background = colors.value[project.mppStatus];
-			if (gantts) {
-				gantts.push(gantt);
-			} else {
-				project.gantts = [gantt];
-			}
-			if (project.delay) {
-				const delayStartTime = increaseDate(finishDate, 1);
-				const delayEndTime = increaseDate(finishDate, project.delay);
-				const gantt = getGanttStyle({
-					startDate: delayStartTime,
-					finishDate: delayEndTime,
-					name
-				});
-				gantt.background = colors.value[3];
-				gantts.push(gantt);
-			}
-			project.children && configGantts(project.children);
-		});
-	};
-	configGantts(projects.value);
-};
 const increaseDate = (date: any, delay: any) => {
 	const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
 	return new Date(timestamp).toISOString().replace(/-/g, "-").slice(0, 10);
@@ -1214,14 +605,12 @@ const getDays = (date: any) => {
 	}
 
 	return (() => {
-		const days = new Array(count)
-			.fill(0)
-			.map((item, index) => {
-				let num = index + 1;
-				let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
-				return { num, date: fulldate };
-			})
-			// .filter(item => item.num % 2);
+		const days = new Array(count).fill(0).map((item, index) => {
+			let num = index + 1;
+			let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
+			return { num, date: fulldate };
+		});
+		// .filter(item => item.num % 2);
 		if (count === 28) {
 			days.push({ num: 28, date: date + "-28" });
 		} else if (count === 30) {
@@ -1230,139 +619,6 @@ const getDays = (date: any) => {
 		return days;
 	})();
 };
-const handleOpen = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndex.value) {
-		openedIndex.value = 9999;
-	} else {
-		openedIndex.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-
-const handleOpenSecond = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexSecond.value) {
-		openedIndexSecond.value = 9999;
-	} else {
-		openedIndexSecond.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenThird = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexThird.value) {
-		openedIndexThird.value = 9999;
-	} else {
-		openedIndexThird.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenFourth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexFourth.value) {
-		openedIndexFourth.value = 9999;
-	} else {
-		openedIndexFourth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenFifth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexFifth.value) {
-		openedIndexFifth.value = 9999;
-	} else {
-		openedIndexFifth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-
-const handleOpenSixth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexSixth.value) {
-		openedIndexSixth.value = 9999;
-	} else {
-		openedIndexSixth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-
-const handleOpenSeven = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexSeven.value) {
-		openedIndexSeven.value = 9999;
-	} else {
-		openedIndexSeven.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenEighth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexEighth.value) {
-		openedIndexEighth.value = 9999;
-	} else {
-		openedIndexEighth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenNinth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexNinth.value) {
-		openedIndexNinth.value = 9999;
-	} else {
-		openedIndexNinth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
-const handleOpenTenth = (index: any) => {
-	// console.log(666);
-	console.log(index);
-	// console.log(openedIndex.value);
-	if (index === openedIndexTenth.value) {
-		openedIndexTenth.value = 9999;
-	} else {
-		openedIndexTenth.value = index;
-	}
-	setTimeout(function () {
-		setGantts();
-	}, 300);
-};
 
 const handleScroll = (e: any) => {
 	if (scrollTimer.value) {
@@ -1372,20 +628,22 @@ const handleScroll = (e: any) => {
 		scrollLeft.value = e.target.scrollLeft;
 		scrollTimer.value = null;
 	}, 100);
+	// console.log(scrollLeft.value);
+	// if (e.target.scrollLeft == 0) return;
 	const fixedElement1 = document.querySelectorAll(".fixed_1");
 	const fixedElement2 = document.querySelectorAll(".fixed_2");
 	const fixedElement3 = document.querySelectorAll(".fixed_3");
-	console.log(fixedElement1);
+	// console.log(fixedElement1);
 	// console.log(fixedElement1[0]);
 	// console.log(fixedElement1.length);
 	for (let i = 0; i < fixedElement1.length; i++) {
-		fixedElement1[i].style.left = e.target.scrollLeft + "px";
+		fixedElement1[i].style.left = e.target.scrollLeft == 0 ? e.target.scrollLeft : e.target.scrollLeft - 4 + "px";
 	}
 	for (let i = 0; i < fixedElement2.length; i++) {
-		fixedElement2[i].style.left = e.target.scrollLeft + "px";
+		fixedElement2[i].style.left = e.target.scrollLeft == 0 ? e.target.scrollLeft : e.target.scrollLeft - 4 + "px";
 	}
 	for (let i = 0; i < fixedElement3.length; i++) {
-		fixedElement3[i].style.left = e.target.scrollLeft + "px";
+		fixedElement3[i].style.left = e.target.scrollLeft == 0 ? e.target.scrollLeft : e.target.scrollLeft - 4 + "px";
 	}
 };
 const handleHover = (e: any, item: any) => {
@@ -1427,11 +685,11 @@ const dateList = computed(() => {
 });
 //甘特图代码结束位置
 
-onMounted(async () => {
+onMounted(() => {
 	dateTime.value = moment(new Date()).format("YYYY-MM");
 	calendarVal.value = moment(new Date()).format("YYYY-MM-DD");
-	await getDelayEventTypeFn();
-	await getMemberCountList();
+	getDelayEventTypeFn();
+	getMemberCountList();
 	// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
 	// 	const scrollTop = e.target.scrollTop;
 	// 	const scrollHeight = e.target.scrollHeight;
@@ -1852,7 +1110,11 @@ onMounted(async () => {
 										display: flex;
 
 										.day {
-											flex: 1;
+											// flex: 1;
+											width: 26px;
+											text-align: left;
+											// flex: 1;
+											position: relative;
 										}
 									}
 								}
@@ -1871,7 +1133,8 @@ onMounted(async () => {
 								}
 
 								&:nth-child(n + 4) {
-									width: 600px;
+									// width: 600px;
+									width: initial;
 								}
 							}
 						}
@@ -1955,10 +1218,12 @@ onMounted(async () => {
 
 										.grid {
 											position: relative;
-											flex: 1;
+											// flex: 1;
+											width: 26px;
 											height: 100%;
 
 											&:not(:last-child) {
+												width: 25px;
 												border-right: 1px solid #3e5a8d;
 											}
 										}
@@ -1976,7 +1241,8 @@ onMounted(async () => {
 									}
 
 									&:nth-child(n + 4) {
-										width: 600px;
+										// width: 600px;
+										width: initial;
 									}
 								}
 
@@ -1997,84 +1263,87 @@ onMounted(async () => {
 									line-height: 38px;
 									font-size: 14px;
 								}
-								// .row {
-								// 	position: relative;
-								// 	display: flex;
-								// 	border-top: 1px solid #3e5a8d;
-								// 	.fixed_1,
-								// 	.fixed_2,
-								// 	.fixed_3 {
-								// 		width: 200px;
-								// 		position: relative;
-								// 		background: #11306a;
-								// 		z-index: 10;
-								// 		overflow: hidden;
-								// 		white-space: nowrap;
-								// 		text-overflow: ellipsis;
-								// 	}
-								// 	.fixed_1 {
-								// 		left: 0;
-								// 		border-left: 1px solid #3e5a8d;
-								// 	}
-								// 	.fixed_2 {
-								// 		left: 0px;
-								// 	}
-								// 	.fixed_3 {
-								// 		left: 0px;
-								// 	}
-								// 	.td {
-								// 		flex-shrink: 0;
-								// 		box-sizing: border-box;
-								// 		height: 42px;
-								// 		line-height: 42px;
-								// 		// background-color: #fff;
-								// 		border-right: 1px solid #3e5a8d;
-								// 		border-bottom: 1px solid #3e5a8d;
-								// 		border-top: 1px solid #3e5a8d;
-								// 		color: #fff;
-								// 		font-size: 16px;
+								.row {
+									position: relative;
+									display: flex;
+									border-top: 1px solid #3e5a8d;
+									.fixed_1,
+									.fixed_2,
+									.fixed_3 {
+										width: 200px;
+										position: relative;
+										background: #11306a;
+										z-index: 10;
+										overflow: hidden;
+										white-space: nowrap;
+										text-overflow: ellipsis;
+									}
+									.fixed_1 {
+										left: 0;
+										border-left: 1px solid #3e5a8d;
+									}
+									.fixed_2 {
+										left: 0px;
+									}
+									.fixed_3 {
+										left: 0px;
+									}
+									.td {
+										flex-shrink: 0;
+										box-sizing: border-box;
+										height: 42px;
+										line-height: 42px;
+										// background-color: #fff;
+										border-right: 1px solid #3e5a8d;
+										border-bottom: 1px solid #3e5a8d;
+										border-top: 1px solid #3e5a8d;
+										color: #fff;
+										font-size: 16px;
 
-								// 		.grids {
-								// 			height: 100%;
-								// 			display: flex;
+										.grids {
+											height: 100%;
+											display: flex;
 
-								// 			.grid {
-								// 				position: relative;
-								// 				flex: 1;
-								// 				height: 100%;
+											.grid {
+												position: relative;
+												// flex: 1;
+												width: 26px;
+												height: 100%;
 
-								// 				&:not(:last-child) {
-								// 					border-right: 1px solid #3e5a8d;
-								// 				}
-								// 			}
-								// 		}
+												&:not(:last-child) {
+													width: 25px;
+													border-right: 1px solid #3e5a8d;
+												}
+											}
+										}
 
-								// 		&:nth-child(1) {
-								// 			padding-left: 40px;
-								// 			width: 200px;
-								// 		}
+										&:nth-child(1) {
+											padding-left: 40px;
+											width: 200px;
+										}
 
-								// 		&:not(:nth-child(1)) {
-								// 			width: 100px;
-								// 			font-size: 14px;
-								// 			text-align: center;
-								// 		}
+										&:not(:nth-child(1)) {
+											width: 100px;
+											font-size: 14px;
+											text-align: center;
+										}
 
-								// 		&:nth-child(n + 4) {
-								// 			width: 400px;
-								// 		}
-								// 	}
+										&:nth-child(n + 4) {
+											// width: 400px;
+											width: initial;
+										}
+									}
 
-								// 	.progress {
-								// 		flex-shrink: 0;
-								// 		position: absolute;
-								// 		top: calc(50% - 7px);
-								// 		width: 20px;
-								// 		height: 14px;
-								// 		cursor: pointer;
-								// 		background: #557dee;
-								// 	}
-								// }
+									.progress {
+										flex-shrink: 0;
+										position: absolute;
+										top: calc(50% - 7px);
+										width: 20px;
+										height: 14px;
+										cursor: pointer;
+										background: #557dee;
+									}
+								}
 							}
 						}
 					}
diff --git a/src/views/sevenLargeScreen/bImModel/index.vue b/src/views/sevenLargeScreen/bImModel/index.vue
index d6935fe..5df333b 100644
--- a/src/views/sevenLargeScreen/bImModel/index.vue
+++ b/src/views/sevenLargeScreen/bImModel/index.vue
@@ -19,11 +19,11 @@ function getBimfaceList() {
 				token.value = res.result.viewToken;
 				console.log("token的值", token.value);
 				localStorage.setItem("bimToken", JSON.stringify(token.value));
-				// let iframe: any = document.getElementById("iframe");
-				// console.log(iframe, "我的测试");
-				// setTimeout(() => {
-				// 	iframe.contentWindow.postMessage({ token: token.value });
-				// }, 500);
+				let iframe: any = document.getElementById("iframe");
+				console.log(iframe, "我的测试");
+				setTimeout(() => {
+					iframe.contentWindow.postMessage({ token: token.value });
+				}, 500);
 			}
 		});
 	});