Merge branch 'master' of http://47.94.222.6:3003/lizuo/VentSystem_2.0_front

.env.development

@@ -26,5 +26,5 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//182.92.126.35:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:7121/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]
 

.env.production

@@ -15,10 +15,11 @@ VITE_BUILD_COMPRESS = 'gzip'
 # 使用压缩时是否删除原始文件，默认为false
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 #VITE_PROXY = [["/jeecgsystem","http://47.94.222.6:9999"],["/upload","http://localhost:3300/upload"]]
-#VITE_PROXY = [["/jeecgsystem","http://192.168.0.79:9999"],["/upload","http://localhost:3300/upload"]]
+#VITE_PROXY = [["/jeecgsystem","http://192.168.1.4:9999"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/jeecgsystem","http://192.168.0.79:9999"],["/upload","http://localhost:3300/upload"]]
 #VITE_PROXY = [["/jeecgsystem","http://42.194.132.36:8099"],["/upload","http://localhost:3300/upload"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.0.30:8086"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://127.0.0.1:9999"],["/upload","http://localhost:3300/upload"]]
+#VITE_PROXY = [["/jeecgsystem","http://127.0.0.1:9999"],["/upload","http://localhost:3300/upload"]]
 
 #后台接口父地址(必填)
 VITE_GLOB_API_URL=/jeecgsystem
@@ -26,7 +27,9 @@ VITE_GLOB_API_URL=/jeecgsystem
 #后台接口全路径地址(必填)
 #VITE_GLOB_DOMAIN_URL=http://jeecg-boot-system:8080/jeecg-boot
 #VITE_GLOB_DOMAIN_URL=http://47.94.222.6:9999
-VITE_GLOB_DOMAIN_URL=http://127.0.0.1:9999
+#VITE_GLOB_DOMAIN_URL=http://192.168.1.4:9999
+VITE_GLOB_DOMAIN_URL=http://192.168.0.79:9999
+#VITE_GLOB_DOMAIN_URL=http://127.0.0.1:9999
 #VITE_GLOB_DOMAIN_URL=http://42.194.132.36:8099
 #采育服务器
 #VITE_GLOB_DOMAIN_URL=http://192.168.0.79:9999
@@ -46,6 +49,6 @@ VITE_LEGACY = false
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//47.94.222.6:7123/"], ["micro-vent-3dModal", "//47.94.222.6:7121/"],["micro-fire-front", "//47.94.222.6:7124/"]]
-#VITE_APP_SUB_APP = []
+#VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.0.79:7121/"]]
 #VITE_APP_SUB_APP = [["micro-need-air", "//127.0.0.1:20000/"], ["micro-vent-3dModal", "//127.0.0.1:30000/"], ["micro-fire-front", "//127.0.0.1:40000/"]]
 VITE_APP_SUB_APP = [["micro-need-air", "//127.0.0.1:7123/"], ["micro-vent-3dModal", "//127.0.0.1:7121/"]]

src/App.vue

@@ -23,7 +23,7 @@
   // support Multi-language
   const { getAntdLocale } = useLocale();
   const width = ref(1920);
-  const height = ref(929);
+  const height = ref(928);
 
   const body = document.body.getBoundingClientRect();
   if (screen.height === body.height && screen.width === body.width) {

src/assets/icons/alarm-fire.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43.789" height="43.832" viewBox="0 0 43.789 43.832">
+  <path id="路径_55193" data-name="路径 55193" d="M625.272,347.156a1.364,1.364,0,0,0-1.677-.966l-5.954,1.6a1.37,1.37,0,0,0,.708,2.647h0l5.954-1.6A1.37,1.37,0,0,0,625.272,347.156Zm-36.064.633-5.954-1.6a1.368,1.368,0,1,0-.708,2.643l5.954,1.6a1.368,1.368,0,1,0,.708-2.643Zm28.6-12.4a1.368,1.368,0,0,0-1.869.5l-3.081,5.336a1.368,1.368,0,1,0,2.369,1.368l3.081-5.336A1.369,1.369,0,0,0,617.805,335.385ZM594,341.226l-3.084-5.336a1.368,1.368,0,1,0-2.369,1.368l3.081,5.336A1.37,1.37,0,0,0,594,341.226Zm9.43-10.806a1.37,1.37,0,0,0-1.368,1.368v6.165a1.365,1.365,0,0,0,1.368,1.368h0a1.364,1.364,0,0,0,1.364-1.368v-6.165A1.367,1.367,0,0,0,603.427,330.42Zm14.265,41.893a2.717,2.717,0,0,0-1.388-.747.676.676,0,0,1-.551-.665V355.171A12.327,12.327,0,1,0,591.1,354.9c0,.055,0,.113,0,.172v15.829a.685.685,0,0,1-.555.665,2.738,2.738,0,0,0-2.185,2.682h30.134A2.753,2.753,0,0,0,617.692,372.313Zm-12.733-5.055s2.17-3.041,0-4.781-1.74-3.472-1.74-3.472c-5.544,3.409-1.462,8.073-1.306,8.249-8.687-3.906-4.343-9.121-2.17-10.856s2.608-6.517,2.608-6.517c4.343,1.74,4.343,6.951,4.343,6.951l1.3-1.3C615.386,364.655,604.959,367.258,604.959,367.258Z" transform="translate(-581.53 -330.42)" fill="#ff3823"/>
+</svg>

src/assets/icons/alarm-temperature.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43.789" height="43.832" viewBox="0 0 43.789 43.832">
+  <path id="路径_55193" data-name="路径 55193" d="M449.692,372.313a2.717,2.717,0,0,0-1.388-.747.675.675,0,0,1-.551-.665V355.171A12.327,12.327,0,1,0,423.1,354.9c0,.055,0,.113,0,.172v15.829a.685.685,0,0,1-.555.665,2.738,2.738,0,0,0-2.185,2.682h30.134A2.753,2.753,0,0,0,449.692,372.313ZM435.7,369.076a5.9,5.9,0,0,1-6.036-5.77,5.691,5.691,0,0,1,2.033-4.347.849.849,0,0,0,.289-.653v-5.958a3.58,3.58,0,0,1,7.158,0v6.134a.542.542,0,0,0,.211.414,5.686,5.686,0,0,1,2.115,4.41A5.907,5.907,0,0,1,435.7,369.076Zm2.025-9.1-.289-.176a.314.314,0,0,1-.149-.266v-7.189a1.721,1.721,0,0,0-3.44,0v7.189a.316.316,0,0,1-.149.27l-.285.176a3.9,3.9,0,0,0-1.892,3.323,4.046,4.046,0,0,0,8.089,0A3.9,3.9,0,0,0,437.725,359.979Zm-2.224,5.547a2.158,2.158,0,0,1-2.1-2.221,2.108,2.108,0,0,1,1.548-2.009v-5.442a.577.577,0,0,1,.579-.579h.047a.6.6,0,0,1,.6.6V361.3a2.16,2.16,0,0,1-.676,4.23Zm-.074-35.107a1.37,1.37,0,0,0-1.368,1.368v6.165a1.365,1.365,0,0,0,1.368,1.368h0a1.364,1.364,0,0,0,1.364-1.368v-6.165A1.367,1.367,0,0,0,435.427,330.42ZM426,341.226l-3.085-5.336a1.368,1.368,0,1,0-2.369,1.368l3.081,5.336A1.37,1.37,0,0,0,426,341.226Zm23.808-5.841a1.368,1.368,0,0,0-1.869.5l-3.081,5.336a1.368,1.368,0,1,0,2.369,1.368l3.081-5.336A1.369,1.369,0,0,0,449.806,335.385Zm-28.6,12.4-5.954-1.6a1.368,1.368,0,1,0-.708,2.643l5.954,1.6a1.368,1.368,0,1,0,.708-2.643Zm36.064-.633a1.364,1.364,0,0,0-1.677-.966l-5.954,1.6a1.37,1.37,0,0,0,.708,2.647h0l5.954-1.6A1.37,1.37,0,0,0,457.273,347.156Z" transform="translate(-413.53 -330.42)" fill="#ff3823"/>
+</svg>

src/assets/icons/aveg-temperature.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="50.313" height="73.149" viewBox="0 0 50.313 73.149">
   <g id="组_13141" data-name="组 13141" transform="translate(-506.549 -355.112)">
     <path id="路径_55369" data-name="路径 55369" d="M234.565,40.948V23.1a1.971,1.971,0,0,0-1.968-1.968h-.156a1.909,1.909,0,0,0-1.91,1.91v17.9a6.93,6.93,0,0,0-5.086,6.606,7.106,7.106,0,1,0,9.12-6.606Zm10.451-7.905a1.8,1.8,0,0,1-.7-1.364V11.5a11.773,11.773,0,0,0-23.54,0v19.6a2.8,2.8,0,0,1-.955,2.15,18.709,18.709,0,0,0-6.69,14.3,19.427,19.427,0,0,0,38.844,0A18.71,18.71,0,0,0,245.016,33.043ZM232.545,60.5a13.14,13.14,0,0,1-13.3-12.946,12.824,12.824,0,0,1,6.216-10.939l.942-.578a1.044,1.044,0,0,0,.494-.883V11.5a5.66,5.66,0,0,1,11.315,0v23.65a1.044,1.044,0,0,0,.494.883l.942.578a12.81,12.81,0,0,1,6.21,10.939A13.154,13.154,0,0,1,232.545,60.5Z" transform="translate(293.42 361.739)" fill="#fff"/>
-    <path id="路径_55371" data-name="路径 55371" d="M64,120.4v3.586H81.725V120.4Zm0,21.934H81.725v-3.586H64Zm0-9.172H81.725v-3.586H64Z" transform="translate(475.138 234.712)" fill="#fff"/>
+    <path id="路径_55371" data-name="路径 55371" d="M64,120.4v3.586H81.725V120.4Zm0,21.934H81.725v-3.586H64Zm0-9.172H81.725v-3.586H64Z" transform="translate(475.138 234.712)" fill="#3df6ff"/>
   </g>
 </svg>

src/assets/icons/device-group-paramer.svg

@@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.056" height="37.502" viewBox="0 0 36.056 37.502">
+  <defs>
+    <filter id="路径_55417" x="0.964" y="0" width="25.447" height="32.35" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55418" x="0.964" y="10.235" width="25.447" height="27.267" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-2"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55419" x="12.645" y="3" width="19.447" height="26.292" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur-3"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-3"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55420" x="9.645" y="10.274" width="25.447" height="27.229" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-4"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-4"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55421" x="5.305" y="5.155" width="25.447" height="32.347" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-5"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-5"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55422" x="0" y="7.716" width="27.376" height="27.376" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-6"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-6"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55423" x="4.34" y="2.351" width="27.376" height="27.376" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-7"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-7"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55424" x="8.68" y="7.716" width="27.376" height="27.376" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-8"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-8"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55425" x="5.305" y="0" width="25.447" height="26.968" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur-9"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur-9"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="组_13324" data-name="组 13324" transform="translate(-42.857 12)">
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55417)">
+      <path id="路径_55417-2" data-name="路径 55417" d="M128,0m.294,0h.858a.26.26,0,0,1,.294.294V8.056a.26.26,0,0,1-.294.294h-.858A.26.26,0,0,1,128,8.056V.294A.26.26,0,0,1,128.294,0Z" transform="translate(-115.04 12)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55418)">
+      <path id="路径_55418-2" data-name="路径 55418" d="M128,776.229m.294,0h.858a.26.26,0,0,1,.294.294V779.2a.26.26,0,0,1-.294.294h-.858A.26.26,0,0,1,128,779.2v-2.679A.26.26,0,0,1,128.294,776.229Z" transform="translate(-115.04 -753.99)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55419)">
+      <path id="路径_55419-2" data-name="路径 55419" d="M786.286,0m.294,0h.858a.26.26,0,0,1,.294.294V8a.26.26,0,0,1-.294.294h-.858A.26.26,0,0,1,786.286,8V.294A.26.26,0,0,1,786.58,0Z" transform="translate(-764.64 12)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55420)">
+      <path id="路径_55420-2" data-name="路径 55420" d="M786.286,779.154m.294,0h.858a.26.26,0,0,1,.294.294v2.64a.26.26,0,0,1-.294.294h-.858a.26.26,0,0,1-.294-.294v-2.64A.26.26,0,0,1,786.58,779.154Z" transform="translate(-764.64 -756.88)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55421)">
+      <path id="路径_55421-2" data-name="路径 55421" d="M457.143,390.949m.294,0h.858a.26.26,0,0,1,.294.294V399a.26.26,0,0,1-.294.294h-.858a.26.26,0,0,1-.294-.294v-7.759A.26.26,0,0,1,457.437,390.949Z" transform="translate(-439.84 -373.79)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55422)">
+      <path id="路径_55422-2" data-name="路径 55422" d="M56.545,586.831m-1.688,0a1.688,1.688,0,1,0,1.688-1.688A1.688,1.688,0,0,0,54.857,586.831Z" transform="translate(-42.86 -565.43)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55423)">
+      <path id="路径_55423-2" data-name="路径 55423" d="M385.688,179.974m-1.688,0a1.688,1.688,0,1,0,1.688-1.688A1.688,1.688,0,0,0,384,179.974Z" transform="translate(-367.66 -163.94)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55424)">
+      <path id="路径_55424-2" data-name="路径 55424" d="M714.831,586.831m-1.688,0a1.688,1.688,0,1,0,1.688-1.688A1.688,1.688,0,0,0,713.143,586.831Z" transform="translate(-692.46 -565.43)" fill="#b0d7ff"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 42.86, -12)" filter="url(#路径_55425)">
+      <path id="路径_55425-2" data-name="路径 55425" d="M457.143,0m.294,0h.858a.26.26,0,0,1,.294.294v2.38a.26.26,0,0,1-.294.294h-.858a.26.26,0,0,1-.294-.294V.294A.26.26,0,0,1,457.437,0Z" transform="translate(-439.84 12)" fill="#b0d7ff"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/device-paramer.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.31" height="31.309" viewBox="0 0 31.31 31.309">
+  <defs>
+    <filter id="路径_55426" x="0" y="0" width="31.31" height="31.309" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-color="#3df6ff"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_55426)">
+    <path id="路径_55426-2" data-name="路径 55426" d="M12.478,1.608A9.518,9.518,0,0,0,6.655,0,9.518,9.518,0,0,0,.832,1.608,2.022,2.022,0,0,0,0,3.12V7.876A.166.166,0,0,0,0,7.9H0v2.288c0,1.722,2.979,3.12,6.655,3.12s6.655-1.4,6.655-3.12V7.9h0c0-.023,0-.045,0-.069V3.12A2.022,2.022,0,0,0,12.478,1.608ZM.832,4.631A9.518,9.518,0,0,0,6.655,6.239a9.518,9.518,0,0,0,5.823-1.608V5.661a6.607,6.607,0,0,1-.764.419,12.23,12.23,0,0,1-5.059.992A12.209,12.209,0,0,1,1.6,6.078a6.607,6.607,0,0,1-.764-.419V4.631Zm0,2.357A9.518,9.518,0,0,0,6.655,8.6a9.518,9.518,0,0,0,5.823-1.608V8.017a6.808,6.808,0,0,1-.764.419,12.235,12.235,0,0,1-5.059.992A12.235,12.235,0,0,1,1.6,8.436a6.607,6.607,0,0,1-.764-.419Zm10.882,3.8a12.235,12.235,0,0,1-5.059.992A12.235,12.235,0,0,1,1.6,10.792a6.935,6.935,0,0,1-.733-.4.7.7,0,0,1-.031-.2V9.346a9.518,9.518,0,0,0,5.823,1.608,9.526,9.526,0,0,0,5.823-1.608v.845a.708.708,0,0,1-.031.2A6.706,6.706,0,0,1,11.714,10.792Z" transform="translate(9 9)" fill="#81f9ff"/>
+  </g>
+</svg>

src/assets/icons/dust-nd.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.94" height="35.285" viewBox="0 0 35.94 35.285">
+  <g id="组_13152" data-name="组 13152" transform="translate(-12.295 -87.45)">
+    <path id="路径_55299" data-name="路径 55299" d="M396.112,91.37m-3.92,0a3.921,3.921,0,1,0,3.92-3.92A3.92,3.92,0,0,0,392.192,91.37Z" transform="translate(-365.776)" fill="#15a1ff"/>
+    <path id="路径_55300" data-name="路径 55300" d="M637.881,587.5m-3.922,0a3.922,3.922,0,1,0,3.922-3.922A3.922,3.922,0,0,0,633.959,587.5Z" transform="translate(-599.702 -480.037)" fill="#15a1ff"/>
+    <path id="路径_55301" data-name="路径 55301" d="M19.846,579.462m-3.922,0a3.922,3.922,0,1,0,3.922-3.922A3.922,3.922,0,0,0,15.924,579.462Z" transform="translate(-1.711 -472.26)" fill="#15a1ff"/>
+    <path id="路径_55302" data-name="路径 55302" d="M394.7,795.751m-2.561,0a2.56,2.56,0,1,0,2.561-2.56A2.56,2.56,0,0,0,392.141,795.751Z" transform="translate(-365.726 -682.852)" fill="#15a1ff"/>
+    <path id="路径_55303" data-name="路径 55303" d="M837.172,340.48m-2.56,0a2.561,2.561,0,1,0,2.56-2.561A2.56,2.56,0,0,0,834.612,340.48Z" transform="translate(-793.847 -242.346)" fill="#15a1ff"/>
+    <path id="路径_55304" data-name="路径 55304" d="M290.509,386.765m-2.56,0a2.561,2.561,0,1,0,2.56-2.56A2.56,2.56,0,0,0,287.949,386.765Z" transform="translate(-264.913 -287.13)" fill="#15a1ff"/>
+    <path id="路径_55305" data-name="路径 55305" d="M30.823,219.853m-2.561,0a2.561,2.561,0,1,0,2.561-2.561A2.56,2.56,0,0,0,28.263,219.853Z" transform="translate(-13.649 -125.631)" fill="#15a1ff"/>
+    <rect id="矩形_4127" data-name="矩形 4127" width="35.94" height="3.7" transform="translate(12.295 119.036)" fill="#15a1ff"/>
+  </g>
+</svg>

src/assets/icons/expansion.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.134" height="20.444" viewBox="0 0 20.134 20.444">
+  <g id="组_13239" data-name="组 13239" transform="translate(0.5 0.5)">
+    <path id="路径_55411" data-name="路径 55411" d="M162.69,177.785a.806.806,0,0,1-.8.8h-1.971a.806.806,0,0,1-.8-.8V159.948a.806.806,0,0,1,.8-.8h1.971a.806.806,0,0,1,.8.8Z" transform="translate(-159.111 -159.144)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+    <path id="路径_55412" data-name="路径 55412" d="M391.806,172.172c0-.442.29-.588.644-.324l11.778,8.771a.566.566,0,0,1,0,.96L392.45,190.35c-.354.264-.644.118-.644-.324Z" transform="translate(-385.36 -171.369)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+  </g>
+</svg>

src/assets/icons/hd-wd.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.978" height="35.926" viewBox="0 0 20.978 35.926">
+  <g id="组_13139" data-name="组 13139" transform="translate(-506.549 -358.691)">
+    <path id="路径_55369" data-name="路径 55369" d="M224.706,22.115V12.478a1.064,1.064,0,0,0-1.063-1.063h-.084a1.031,1.031,0,0,0-1.031,1.031v9.668a3.743,3.743,0,0,0-2.747,3.568,3.838,3.838,0,1,0,4.925-3.568Zm5.645-4.269a.97.97,0,0,1-.379-.737V6.213a6.358,6.358,0,0,0-12.713,0V16.8a1.515,1.515,0,0,1-.516,1.161,10.1,10.1,0,0,0-3.613,7.725,10.492,10.492,0,0,0,20.978,0A10.1,10.1,0,0,0,230.351,17.846Zm-6.736,14.829a7.1,7.1,0,0,1-7.185-6.992,6.926,6.926,0,0,1,3.357-5.908l.509-.312a.564.564,0,0,0,.267-.477V6.213a3.057,3.057,0,0,1,6.111,0V18.986a.564.564,0,0,0,.267.477l.509.312a6.918,6.918,0,0,1,3.354,5.908,7.1,7.1,0,0,1-7.188,6.992Z" transform="translate(293.42 358.691)" fill="#15a1ff"/>
+  </g>
+</svg>

src/assets/icons/kg.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.482" height="17.99" viewBox="0 0 31.482 17.99">
+  <g id="组_13154" data-name="组 13154" transform="translate(-64 -256)">
+    <path id="路径_55376" data-name="路径 55376" d="M86.487,273.99H72.995a8.995,8.995,0,1,1,0-17.99H86.487a8.995,8.995,0,0,1,0,17.99Zm0-15.741H72.995a6.746,6.746,0,0,0,0,13.492H86.487a6.746,6.746,0,0,0,0-13.492Z" transform="translate(0 0)" fill="#15a1ff"/>
+    <path id="路径_55377" data-name="路径 55377" d="M160,357.622a5.622,5.622,0,1,1,5.622,5.622A5.622,5.622,0,0,1,160,357.622Z" transform="translate(-92.627 -92.627)" fill="#15a1ff"/>
+  </g>
+</svg>

src/assets/icons/max-temperature.svg.svg → src/assets/icons/max-temperature.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="50.313" height="73.149" viewBox="0 0 50.313 73.149">
   <g id="组_13139" data-name="组 13139" transform="translate(-506.549 -355.112)">
     <path id="路径_55369" data-name="路径 55369" d="M234.565,40.948V23.1a1.971,1.971,0,0,0-1.968-1.968h-.156a1.909,1.909,0,0,0-1.91,1.91v17.9a6.93,6.93,0,0,0-5.086,6.606,7.106,7.106,0,1,0,9.12-6.606Zm10.451-7.905a1.8,1.8,0,0,1-.7-1.364V11.5a11.773,11.773,0,0,0-23.54,0v19.6a2.8,2.8,0,0,1-.955,2.15,18.709,18.709,0,0,0-6.69,14.3,19.427,19.427,0,0,0,38.844,0A18.71,18.71,0,0,0,245.016,33.043ZM232.545,60.5a13.14,13.14,0,0,1-13.3-12.946,12.824,12.824,0,0,1,6.216-10.939l.942-.578a1.044,1.044,0,0,0,.494-.883V11.5a5.66,5.66,0,0,1,11.315,0v23.65a1.044,1.044,0,0,0,.494.883l.942.578a12.81,12.81,0,0,1,6.21,10.939A13.154,13.154,0,0,1,232.545,60.5Z" transform="translate(293.42 361.739)" fill="#fff"/>
-    <path id="路径_55370" data-name="路径 55370" d="M284.718,159.821v14.623h2.954V159.821l3.1,3.1,2.068-2.216L286.2,154.06l-6.647,6.647,2.068,2.068Zm-7.385-7.533h17.725v-2.954H277.333Z" transform="translate(261.805 205.778)" fill="#fff"/>
+    <path id="路径_55370" data-name="路径 55370" d="M284.718,159.821v14.623h2.954V159.821l3.1,3.1,2.068-2.216L286.2,154.06l-6.647,6.647,2.068,2.068Zm-7.385-7.533h17.725v-2.954H277.333Z" transform="translate(261.805 205.778)" fill="#3df6ff"/>
   </g>
 </svg>

src/assets/icons/min-temperature.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="50.313" height="73.149" viewBox="0 0 50.313 73.149">
   <g id="组_13140" data-name="组 13140" transform="translate(-506.549 -355.112)">
     <path id="路径_55369" data-name="路径 55369" d="M234.565,40.948V23.1a1.971,1.971,0,0,0-1.968-1.968h-.156a1.909,1.909,0,0,0-1.91,1.91v17.9a6.93,6.93,0,0,0-5.086,6.606,7.106,7.106,0,1,0,9.12-6.606Zm10.451-7.905a1.8,1.8,0,0,1-.7-1.364V11.5a11.773,11.773,0,0,0-23.54,0v19.6a2.8,2.8,0,0,1-.955,2.15,18.709,18.709,0,0,0-6.69,14.3,19.427,19.427,0,0,0,38.844,0A18.71,18.71,0,0,0,245.016,33.043ZM232.545,60.5a13.14,13.14,0,0,1-13.3-12.946,12.824,12.824,0,0,1,6.216-10.939l.942-.578a1.044,1.044,0,0,0,.494-.883V11.5a5.66,5.66,0,0,1,11.315,0v23.65a1.044,1.044,0,0,0,.494.883l.942.578a12.81,12.81,0,0,1,6.21,10.939A13.154,13.154,0,0,1,232.545,60.5Z" transform="translate(293.42 361.739)" fill="#fff"/>
-    <path id="路径_55370" data-name="路径 55370" d="M284.718,163.956V149.334h2.954v14.623l3.1-3.1,2.068,2.216-6.647,6.647-6.647-6.647L281.616,161Zm-7.385,7.533h17.725v2.954H277.333Z" transform="translate(261.805 205.778)" fill="#fff"/>
+    <path id="路径_55370" data-name="路径 55370" d="M284.718,163.956V149.334h2.954v14.623l3.1-3.1,2.068,2.216-6.647,6.647-6.647-6.647L281.616,161Zm-7.385,7.533h17.725v2.954H277.333Z" transform="translate(261.805 205.778)" fill="#3df6ff"/>
   </g>
 </svg>

src/assets/icons/put-away.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.134" height="20.444" viewBox="0 0 20.134 20.444">
+  <g id="组_13239" data-name="组 13239" transform="translate(0.5 0.5)">
+    <path id="路径_55411" data-name="路径 55411" d="M159.112,177.785a.806.806,0,0,0,.8.8h1.971a.806.806,0,0,0,.8-.8V159.948a.806.806,0,0,0-.8-.8h-1.971a.806.806,0,0,0-.8.8Z" transform="translate(-143.556 -159.144)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+    <path id="路径_55412" data-name="路径 55412" d="M404.494,172.172c0-.442-.29-.588-.644-.324l-11.778,8.771a.566.566,0,0,0,0,.96l11.778,8.771c.354.264.644.118.644-.324Z" transform="translate(-391.806 -171.369)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+  </g>
+</svg>

src/assets/icons/pw-sy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34.212" height="30.791" viewBox="0 0 34.212 30.791">
+  <path id="路径_55375" data-name="路径 55375" d="M102.439,141.685q6.415,7.149,6.415,10.691a6.415,6.415,0,1,1-12.83,0Q96.024,148.835,102.439,141.685Zm0-13.685a17.221,17.221,0,0,1,17.106,17.334,17.415,17.415,0,0,1-3.158,10.036h-4.059a14.232,14.232,0,0,0,4.105-10.036q0-.624-.051-1.235H113.9v-3.218h1.832a14.05,14.05,0,0,0-11.654-9.631v3.192H100.8v-3.2a14.057,14.057,0,0,0-11.654,9.632h1.829V144.1H88.5q-.052.616-.051,1.235a14.232,14.232,0,0,0,4.105,10.035l-4.061,0a17.411,17.411,0,0,1-3.158-10.036A17.221,17.221,0,0,1,102.439,128Zm1.924,20.527q-1.924,2.145-1.924,3.207a1.924,1.924,0,1,0,3.849,0Q106.287,150.673,104.363,148.527Z" transform="translate(-85.332 -128)" fill="#15a1ff"/>
+</svg>

src/assets/icons/smoke-temperature.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40.011" height="37.151" viewBox="0 0 40.011 37.151">
+  <path id="路径_55409" data-name="路径 55409" d="M458.332,493.569l-18.179-33.425c-.817-1.521-2.17-1.583-2.991-.063L418.984,493.6c-.821,1.517-.063,2.518,1.685,2.518h35.982C458.395,496.122,459.153,495.09,458.332,493.569Zm-19.512-3.585a5.9,5.9,0,0,1-6.036-5.77,5.691,5.691,0,0,1,2.033-4.347.849.849,0,0,0,.289-.653v-5.958a3.58,3.58,0,0,1,7.158,0v6.134a.542.542,0,0,0,.211.414,5.685,5.685,0,0,1,2.115,4.41A5.907,5.907,0,0,1,438.82,489.984Zm2.025-9.1-.289-.176a.314.314,0,0,1-.149-.266v-7.189a1.721,1.721,0,0,0-3.44,0v7.189a.316.316,0,0,1-.149.27l-.285.176a3.9,3.9,0,0,0-1.892,3.323,4.046,4.046,0,0,0,8.089,0A3.9,3.9,0,0,0,440.845,480.887Zm-2.224,5.547a2.158,2.158,0,0,1-2.1-2.221,2.108,2.108,0,0,1,1.548-2.009v-5.442a.577.577,0,0,1,.579-.579h.047a.6.6,0,0,1,.6.6V482.2a2.16,2.16,0,0,1-.676,4.23Z" transform="translate(-418.653 -458.971)" fill="#fff"/>
+</svg>

src/assets/icons/warning-CO.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40.011" height="37.151" viewBox="0 0 40.011 37.151">
+  <path id="路径_55408" data-name="路径 55408" d="M950.857,481.723a.752.752,0,0,0-.739.743v.86a.741.741,0,0,0,1.482,0v-.86A.758.758,0,0,0,950.857,481.723Zm0,0a.752.752,0,0,0-.739.743v.86a.741.741,0,0,0,1.482,0v-.86A.758.758,0,0,0,950.857,481.723Zm17.475,11.846-18.179-33.425c-.817-1.521-2.17-1.583-2.991-.063L928.984,493.6c-.821,1.517-.063,2.518,1.685,2.518h35.982C968.395,496.122,969.153,495.09,968.332,493.569Zm-10.4-9.063a5.205,5.205,0,0,1-5.039,3.866h-8.609a5.2,5.2,0,0,1-1.345-10.231,5.646,5.646,0,0,1,.8-1.63,5.848,5.848,0,0,1,1.3-1.314,5.909,5.909,0,0,1,1.654-.844,6.1,6.1,0,0,1,3.792,0,5.811,5.811,0,0,1,2.956,2.158,5.753,5.753,0,0,1,.8,1.63A5.2,5.2,0,0,1,957.933,484.506Zm-4.508-4.66h-.016a.967.967,0,0,1-.712-.715,4.215,4.215,0,0,0-8.218,0,.961.961,0,0,1-.712.715l-.008,0h-.008a3.38,3.38,0,0,0,.532,6.72h8.609a3.4,3.4,0,0,0,3.4-3.4A3.348,3.348,0,0,0,953.426,479.846Zm-4.871,1.208a.7.7,0,0,1-.641.747.477.477,0,0,1-.106,0h-1.095a1.132,1.132,0,0,0,0,2.264h1.1a.741.741,0,0,1,.747.731v.016a.614.614,0,0,1-.555.668.541.541,0,0,1-.113,0h-1.173a2.555,2.555,0,0,1-2.545-2.545,2.673,2.673,0,0,1,.747-1.834,2.472,2.472,0,0,1,1.8-.79h1.095a.741.741,0,0,1,.747.731Zm4.457,2.271a2.154,2.154,0,0,1-4.308,0v-.86a2.154,2.154,0,0,1,4.308,0Zm-2.154-1.6a.752.752,0,0,0-.739.743v.86a.741.741,0,0,0,1.482,0v-.86A.758.758,0,0,0,950.857,481.723Z" transform="translate(-928.653 -458.971)" fill="#ff9b17"/>
+</svg>

src/assets/icons/warning-fire.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40.011" height="37.151" viewBox="0 0 40.011 37.151">
+  <path id="路径_55406" data-name="路径 55406" d="M626.332,493.569l-18.179-33.425c-.817-1.521-2.17-1.583-2.991-.063L586.984,493.6c-.821,1.517-.063,2.518,1.685,2.518h35.982C626.395,496.122,627.153,495.09,626.332,493.569Zm-17.253-3.012s2.17-3.042,0-4.781a8.332,8.332,0,0,1-2.74-3.472c-5.544,3.409-1.462,8.073-1.306,8.249-8.687-3.905-5.343-11.121-3.17-12.856s3.608-6.517,3.608-6.517c4.343,1.74,5.343,6.951,5.343,6.951l1.3-1.3C619.506,485.953,609.079,490.557,609.079,490.557Z" transform="translate(-586.653 -458.971)" fill="#ff9b17"/>
+</svg>

src/assets/icons/warning-smoke.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40.011" height="37.151" viewBox="0 0 40.011 37.151">
+  <path id="路径_55407" data-name="路径 55407" d="M799.332,493.569l-18.179-33.425c-.817-1.521-2.17-1.583-2.991-.063L759.984,493.6c-.821,1.517-.062,2.518,1.685,2.518h35.982C799.395,496.122,800.153,495.09,799.332,493.569Zm-28.523-11.58a1.116,1.116,0,0,1,.192-.864l-.117.008-.109-1.986,9.191-.516h.5l.121,1.912-7.51.457c1.583.184,3.163.375,4.816.575l.016,0c.731.086,1.482.18,2.232.27l.512.059-.231,1.947-9.637-1.141.031-.485A1.6,1.6,0,0,0,770.809,481.989Zm16.486-.805a5.612,5.612,0,0,1,.426,2.545,4.692,4.692,0,0,1-.942,2.424,5,5,0,0,1-1.747,1.521,4.8,4.8,0,0,1-2.193.5,6.541,6.541,0,0,1-.958-.074,2.173,2.173,0,0,0-.321-.031,1.111,1.111,0,0,0-.778.328,3.7,3.7,0,0,1-1.165.688,3.85,3.85,0,0,1-3.448-.461,3.152,3.152,0,0,1-1.306-1.857l-.1-.422.4-.172.086-.039a1.7,1.7,0,0,1,.7-.192,1.188,1.188,0,0,1,.981.649,1.5,1.5,0,0,0,1.294.755,1.911,1.911,0,0,0,1.869-1.556l.082-.391.4-.016c.059,0,.125-.012.2-.023a2.492,2.492,0,0,1,.34-.031.9.9,0,0,1,.583.188.941.941,0,0,1,.332.586h0a1.808,1.808,0,0,0,.661.113,3.351,3.351,0,0,0,2.361-1.095,2.988,2.988,0,0,0,.606-1.486,2.8,2.8,0,0,0-.082-1.345l-1.458.512-.618-1.716.676-.336.5-.25a2,2,0,0,0-.938-3.765.5.5,0,0,0-.074,0c-.3.016-.367.082-.367.082s-.035.043-.02.211a2.214,2.214,0,0,1-.074.661c-.016.082-.035.164-.047.246l-.074.465-.473-.035a1.519,1.519,0,0,1-.926-.3,1.2,1.2,0,0,1-.371-1.04,1.738,1.738,0,0,0-1.263-1.88,1.431,1.431,0,0,0-.481-.082,1.824,1.824,0,0,0-1.411.766,1.29,1.29,0,0,1-.954.563,1.41,1.41,0,0,1-.958-.493l-.242-.242.129-.317a3.4,3.4,0,0,1,1.071-1.45,3.709,3.709,0,0,1,1.626-.7,4.515,4.515,0,0,1,.86-.082v0a3.463,3.463,0,0,1,1.47.3,3.231,3.231,0,0,1,1.232.977.857.857,0,0,0,.762.426c.09,0,.176-.008.262-.02a4.371,4.371,0,0,1,.508-.031,3.62,3.62,0,0,1,1.755.438,3.936,3.936,0,0,1,1.357,1.267,3.856,3.856,0,0,1,.692,1.978,4.654,4.654,0,0,1-.383,2.033A1.105,1.105,0,0,0,787.3,481.183Z" transform="translate(-759.653 -458.971)" fill="#ff9b17"/>
+</svg>

src/assets/icons/warning-temperature.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40.011" height="37.151" viewBox="0 0 40.011 37.151">
+  <path id="路径_55409" data-name="路径 55409" d="M458.332,493.569l-18.179-33.425c-.817-1.521-2.17-1.583-2.991-.063L418.984,493.6c-.821,1.517-.063,2.518,1.685,2.518h35.982C458.395,496.122,459.153,495.09,458.332,493.569Zm-19.512-3.585a5.9,5.9,0,0,1-6.036-5.77,5.691,5.691,0,0,1,2.033-4.347.849.849,0,0,0,.289-.653v-5.958a3.58,3.58,0,0,1,7.158,0v6.134a.542.542,0,0,0,.211.414,5.685,5.685,0,0,1,2.115,4.41A5.907,5.907,0,0,1,438.82,489.984Zm2.025-9.1-.289-.176a.314.314,0,0,1-.149-.266v-7.189a1.721,1.721,0,0,0-3.44,0v7.189a.316.316,0,0,1-.149.27l-.285.176a3.9,3.9,0,0,0-1.892,3.323,4.046,4.046,0,0,0,8.089,0A3.9,3.9,0,0,0,440.845,480.887Zm-2.224,5.547a2.158,2.158,0,0,1-2.1-2.221,2.108,2.108,0,0,1,1.548-2.009v-5.442a.577.577,0,0,1,.579-.579h.047a.6.6,0,0,1,.6.6V482.2a2.16,2.16,0,0,1-.676,4.23Z" transform="translate(-418.653 -458.971)" fill="#ff9b17"/>
+</svg>

src/components/Table/src/BasicTable.vue

@@ -434,6 +434,7 @@
 <style lang="less" scoped>
   @ventSpace: zxm;
   :deep(.@{ventSpace}-select-dropdown) {
+    left: 0px !important;
     top: 36px !important;
   }
 </style>

src/components/vent/fourBorderBg.vue

@@ -29,7 +29,7 @@ export default defineComponent ({
     border: 1px solid #4D7AD855;
     border-radius: 2px;
     background-color: #001d3055;
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(2px);
     box-shadow: 0 0 10px #5984E055 inset;
     padding: 5px 8px;
     color: #ffffffee;

src/design/vent/comment.less

@@ -22,4 +22,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+
+.vent-margin-b-20{
+  margin-bottom: 20px;
+}
+.vent-margin-t-20 {
+  margin-top: 20px;
 }

src/design/vent/index.less

@@ -18,6 +18,17 @@
     border-color: #91e9fe99 !important;
   }
 }
+.@{ventSpace}-btn-dangerous{
+  color: #fff !important;
+  border-color: #ed4c4c !important;
+  background: #ed4c4c !important;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045) !important;
+  &:hover, &:focus {
+    background: #ee3636 !important;
+    border-color: #ee3636 !important;
+  }
+}
 
 .@{ventSpace}-btn-link {
   color: #00e7ff !important;
@@ -442,6 +453,8 @@
   }
 }
 
-
-
+/** 摄像头 */
+.video-wrapper{
+  height: 100%;
+}
 

src/enums/pageEnum.ts

@@ -5,9 +5,9 @@ export enum PageEnum {
   // 暂时修改
   // BASE_LOGIN = '/monitor/monitor-fan-main',
   // basic home path
-  // BASE_HOME = '/micro-vent-3dModal/dashboard/analysis',
+  BASE_HOME = '/micro-vent-3dModal/dashboard/analysis',
   // BASE_HOME = '/micro-need-air',
-  BASE_HOME = '/monitorChannel/monitor-windrect',
+  // BASE_HOME = '/monitorChannel/monitor-windrect',
   // error page path
   ERROR_PAGE = '/exception',
   // error log page path

src/layouts/default/content/index.vue

@@ -40,7 +40,7 @@
       const { currentRoute } = router;
       const globSetting = useGlobSetting();
       const openQianKun = globSetting.openQianKun;
-      const loading = ref(true);
+      const loading = ref(false);
       let actions;
       if (openQianKun == 'true') {
         actions = getActions();

src/layouts/default/sider/bottomSideder.vue

@@ -17,7 +17,7 @@
         <div class="vent-flex-row program-group">
           <template v-for="(programMenu, key) in menuModules" :key="key">
             <div
-              v-if="programMenu.title !== '首页'"
+              v-if="!programMenu.title.startsWith('首页')"
               class="program-menu"
               :class="{ 'program-menu-active': currentParentRoute == programMenu }"
               @mouseenter="selectMenu(programMenu)"
@@ -26,9 +26,9 @@
           </template>
         </div>
         <div class="setting-group">
-          <Icon class="icon-style" size="18" name="home" @click="go('/micro-vent-3dModal/dashboard/analysis')" />
-          <Icon class="icon-style" size="18" name="fixed" />
-          <Icon class="icon-style" size="18" name="enter" />
+          <SvgIcon class="icon-style" size="18" name="home" @click="go('/micro-vent-3dModal/dashboard/analysis')" />
+          <SvgIcon class="icon-style" size="18" name="fixed" />
+          <SvgIcon class="icon-style" size="18" name="enter" />
           <!-- <SvgIcon class="icon-style" size="18" name="setting" />  
           <SvgIcon class="icon-style" size="18" name="hidden" /> -->
         </div>
@@ -45,14 +45,14 @@
   import { defineComponent, onMounted, ref, unref } from 'vue';
   import type { Menu } from '/@/router/types';
   import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { Icon } from '/@/components/Icon';
+  import { SvgIcon } from '/@/components/Icon';
   import { getMenus } from '/@/router/menus';
   import { useGo } from '/@/hooks/web/usePage';
   import { useRouter } from 'vue-router';
 
   export default defineComponent({
     name: 'BottomSider',
-    components: { FourBorderBg, Icon },
+    components: { FourBorderBg, SvgIcon },
     setup() {
       const isShowMenu = ref(0);
       let menuModules = ref<Menu[]>([]);
@@ -124,7 +124,7 @@
     position: fixed;
     bottom: 2px;
     left: 0px;
-    z-index: 9999;
+    z-index: 999990;
     color: #fff;
     .menu-container {
       width: 480px;
@@ -134,6 +134,7 @@
       // background-color: #06115a;
       border: 1px solid #0099e6;
       background-color: #0c1e2b;
+      z-index: 999;
       // backdrop-filter: blur(8px);
       .four-border-bg {
         margin: 5px;

src/qiankun/state.ts

@@ -24,7 +24,7 @@ export function getProps() {
  * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
  * @param state 主应用穿的公共数据
  */
-export function initGlState(info: any = { token: '', userInfo: {}, isMounted: false , widthScale: 1, heightScale: 1}) {
+export function initGlState(info: any = { token: '', userInfo: {}, isMounted: false,locationObj: null, locationId: '', pageObj: null,  widthScale: 1, heightScale: 1}) {
   if (actions) return;
   // 初始化state
   actions = initGlobalState(info);
@@ -32,6 +32,7 @@ export function initGlState(info: any = { token: '', userInfo: {}, isMounted: fa
   actions.setGlobalState({
     token: getToken(),
     isMounted: false,
+    pageObj: {},
     widthScale: 1,
     heightScale: 1
   });

src/utils/threejs/main.worker.ts

@@ -18,6 +18,8 @@ export function initModalWorker() {
     'cf/lmcfSide.glb',
     'cf/zdcf.glb',
     'cf/dscf.glb',
+    'cf/dsgd.glb',
+    'cf/dsmove.glb',
     'jbfj/jbfj_hd.glb',
     'jbfj/jbfj_fm.glb',
     'jbfj/jbfj_fc.glb',
@@ -27,8 +29,10 @@ export function initModalWorker() {
     'ztfj/bg.glb',
     'fire/laneway.glb',
     'fire/chamber.glb',
-    'yafeng/nitrogen.glb',
-    // 'ceshi/glass.glb',
+    'fire/workFace.glb',
+    'yafeng/compressor.glb',
+    'fire/nitrogen.glb',
+    'fire/grout.glb',
   ];
 
   const db: any = new Dexie('DB');

src/views/dashboard/Analysis/homePage/network.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="zl-box">
     <div class="zl-container-box">
-      
       <div class="top-box">
         <div class="left-box lr-box">
-          <div class = "container-title">
+          <!-- <div class = "container-title">
             <a-select
               class="title-select"
               ref="select"
@@ -15,7 +14,7 @@
               <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
               <a-select-option value="3">掘进工作面</a-select-option>
             </a-select>
-          </div>
+          </div> -->
           <div class="analysis-box">
             <div class="pie-group">
               <div class="item-pie">
@@ -312,24 +311,24 @@ onUnmounted(() => {
     }
 
     .left-box {
-      .container-title {
-        width: 398px;
-        height: 34px;
-        top: -30px;
-        background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-        background-size: contain;
-        padding: 0 0 0 180px;
-        font-size: 20px;
-        pointer-events: auto;
-        position: relative;
-
-        .title-select {
-          width: 198px;
-          position: absolute;
-          top: 0;
-          left: 180px;
-        }
-      }
+      // .container-title {
+      //   width: 398px;
+      //   height: 34px;
+      //   top: -30px;
+      //   background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      //   background-size: contain;
+      //   padding: 0 0 0 180px;
+      //   font-size: 20px;
+      //   pointer-events: auto;
+      //   position: relative;
+
+      //   .title-select {
+      //     width: 198px;
+      //     position: absolute;
+      //     top: 0;
+      //     left: 180px;
+      //   }
+      // }
 
       .analysis-box {
         position: relative;

src/views/dashboard/Analysis/homePage/workerFace.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="center-container">
     <div class="lr-box left-box">
-      <div class="container-title">
+      <!-- <div class="container-title">
         <a-select class="title-select" ref="select" v-model:value="currentTitleValue" @change="handleTitleChange">
           <a-select-option value="2">15212工作面</a-select-option>
           <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
           <a-select-option value="3">掘进工作面</a-select-option>
         </a-select>
-      </div>
+      </div> -->
 
       <div class="item">
         <dv-decoration7 style="height: 30px">
@@ -28,7 +28,7 @@
           </div>
         </div>
         <div class="item-container">
-          <!-- <BarAndLineCustom xAxisPropType="time" :chartData="monitorData" height="240px" :propTypeArr="['jin', 'hui']" :option="echartsOption" /> -->
+          <BarAndLineCustom xAxisPropType="time" :chartData="monitorData" height="240px" :propTypeArr="['jin', 'hui']" :option="echartsOption" />
         </div>
       </div>
       <div class="item">
@@ -181,7 +181,7 @@
   import { onMounted, onUnmounted, ref, reactive } from 'vue';
   import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard, BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3';
   import { workerFaceDeviceList } from '../home.data';
-  // import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
+  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
   import { list, deviceMonitor } from '../home.api';
   import echarts from '/@/utils/lib/echarts';
   import MonitorTable from '/@/views/vent/monitorManager/comment/MonitorTable.vue';
@@ -400,32 +400,31 @@
       flex-direction: column;
       pointer-events: auto;
 
-      .container-title {
-        width: 398px;
-        height: 34px;
-        position: relative;
-        top: -30px;
-        background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-        background-size: contain;
-        padding: 0 0 0 180px;
-        font-size: 20px;
-        pointer-events: auto;
-        position: relative;
+      // .container-title {
+      //   width: 398px;
+      //   height: 34px;
+      //   position: relative;
+      //   top: -30px;
+      //   background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      //   background-size: contain;
+      //   padding: 0 0 0 180px;
+      //   font-size: 20px;
+      //   pointer-events: auto;
+      //   position: relative;
 
-        .title-select {
-          width: 198px;
-          position: absolute;
-          top: 0;
-          left: 180px;
-        }
-      }
+      //   .title-select {
+      //     width: 198px;
+      //     position: absolute;
+      //     top: 0;
+      //     left: 180px;
+      //   }
+      // }
       .item {
         // flex: 1;
         width: 100%;
         display: flex;
         justify-content: center;
         flex-direction: column;
-        min-height: 200px;
         margin-bottom: 20px;
         align-items: center;
         .item-container {
@@ -652,6 +651,9 @@
 
       }
     }
+    .left-box{
+      margin-top: 30px;
+    }
   }
 
   :deep(.@{ventSpace}-table-thead){

src/views/dashboard/Analysis/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="vent-home">
-    <div class="vent-home-header">
-      <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
-      <div class="header-text">智能管控系统</div>
-    </div>
+    <customHeader>智能管控系统</customHeader>
     <div class="home-container">
       <workerFace v-if="isBtnActive == 'workFace'"/>
       <netWork v-if="isBtnActive == 'netWork'"/>
@@ -19,10 +16,11 @@
 </template>
 <script lang="ts" setup>
   import {onMounted, onUnmounted, ref } from 'vue'
-  import { Decoration5,  Decoration11 } from '@kjgl77/datav-vue3'
+  import { Decoration11 } from '@kjgl77/datav-vue3'
   import { bottomBtnList } from "./home.data";
   import workerFace from './homePage/workerFace.vue'
   import netWork from './homePage/network.vue'
+  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
 
   const activeColors = []
   const noActiveColors = ['#aaa', '#aaa']
@@ -48,32 +46,12 @@
   })
 
 </script>
-<style lang="less">
-   @import '/@/design/vent/modal.less';
-   .@{ventSpace}-select-dropdown {
-    border-bottom: 1px solid #ececec66;
-    background: transparent !important;
-    backdrop-filter: blur(50px);
-
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
-    .@{ventSpace}-select-item-option-selected,
-    .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
-    }
-    .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
-    }
-  }
-   
-</style>
 <style lang="less" scoped>
   @ventSpace: zxm;
   .vent-home {
     width: 100%;
-    height: calc(100%);
+    // height: calc(100%);
     position: fixed;
     z-index: 99;
     display: flex;
@@ -81,25 +59,7 @@
     justify-content: center;
     align-items: center;
     pointer-events: none;
-    .vent-home-header {
-      width: 100%;
-      height: 100px;
-      position: fixed;
-      top: 0;
-      background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-      background-size: contain;
-      display: flex;
-      justify-content: center;
-      .header-icon{
-        margin-top: 45px;
-      }
-      .header-text{
-        position: fixed;
-        top: 18px;
-        color: #fff;
-        font-size: 26px;
-      }
-    }
+    top: 0;
     .home-container {
       width: 100%;
       height: calc(100% - 200px);
@@ -127,22 +87,7 @@
     }
     
   }
-  :deep(.zxm-select){
-    width: 300px;
-  
-    .@{ventSpace}-select-selector{
-      background: transparent !important;
-      border: none !important;
-      box-shadow: none !important;
-      .zxm-select-selection-item{
-        color: #fff !important;
-        font-size: 20px;
-      }
-    }
-    .@{ventSpace}-select-arrow{
-      color: #fff !important;
-    }
-  }
+
 
   
 </style>

src/views/vent/comment/components/bottomMenu.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="bottom-btn-group">
+    <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item" @click="setBtn('click', item)"
+      @mouseenter="setBtn('over', item)" @mouseleave="setBtn('leave', item)">
+      <dv-decoration11
+        :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
+        style="width:200px;height:60px;">
+        {{ item.title }}
+      </dv-decoration11>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import { Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'
+type navListType = { title: string; pathName: string; isHover: Boolean };
+
+export default defineComponent({
+  name: 'BottomMenu',
+  components: { DvDecoration11 },
+  props: {
+    navList: {
+      type: Array<navListType>,
+      default: () => [
+        {
+          title: '监控界面',
+          pathName: 'monitor',
+          isHover: false
+        },
+        {
+          title: '历史监测记录',
+          pathName: 'monitor_history',
+          isHover: false
+        },
+        {
+          title: '操作历史记录',
+          pathName: 'handler_history',
+          isHover: false
+        },
+        {
+          title: '故障诊断历史记录',
+          pathName: 'faultRecord',
+          isHover: false
+        }
+      ]
+    },
+  },
+  emits: ['change'],
+  setup(props, {emit}) {
+    const isBtnActive = ref(props.navList[0].pathName)
+    const activeColors = ['#009BFF', '#28DBE4']
+    const noActiveColors = ['#aaa', '#aaa']
+
+    function setBtn(type, activeObj) {
+      if (type === 'over') {
+        activeObj.isHover = true
+      } else if (type === 'leave') {
+        activeObj.isHover = false
+      } else if (type === 'click') {
+        isBtnActive.value = activeObj.pathName
+      }
+      emit('change', isBtnActive.value)
+    }
+    return {
+      activeColors, noActiveColors, setBtn, isBtnActive
+    }
+  },
+})
+
+
+</script>
+<style lang="less" scoped>
+.bottom-btn-group {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    height: 100px;
+    bottom: 20px;
+    align-items: center;
+    justify-content: center;
+
+    .btn-item {
+      width: 200px;
+      height: 60px;
+      margin: 10px;
+      color: #fff;
+      cursor: pointer;
+      pointer-events: auto;
+    }
+  }
+</style>

src/views/vent/comment/components/customHeader.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="vent-custom-header">
+    <div class="vent-home-header">
+      <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
+      <div class="header-text"><slot></slot></div>
+    </div>
+    <div class = "container-title">
+      <a-select
+        class="title-select"
+        ref="select"
+        v-model:value="currentTitleValue"
+        @change="handleTitleChange"
+        popupClassName="drop"
+        :field-names="fieldNames"
+        :options="options"
+        :dropdownStyle="{ background : 'transparent',  borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)'}"
+      >
+        <!-- <a-select-option value="2">15212工作面</a-select-option>
+        <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
+        <a-select-option value="3">掘进工作面</a-select-option> -->
+      </a-select>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { Decoration5 } from '@kjgl77/datav-vue3'
+export default defineComponent({
+  name: 'customHeader',
+  components: { Decoration5 },
+  props: {
+    optionValue: {
+      type: String
+    },
+    fieldNames: {
+      type: Object,
+      default: () => {}
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const currentTitleValue = computed(() => props.optionValue)
+    // 标题选择
+    function handleTitleChange(value) {
+      emit('change', value)
+    }   
+    return {
+      currentTitleValue,
+      handleTitleChange,
+    }
+  },
+})
+</script>
+<style lang="less">
+@import '/@/design/vent/modal.less';
+
+.@{ventSpace}-select-dropdown {
+  .@{ventSpace}-select-item {
+    color: #fff !important;
+  }
+
+  .@{ventSpace}-select-item-option-selected,
+  .@{ventSpace}-select-item-option-active {
+    background-color: #00678b66 !important;
+  }
+
+  .@{ventSpace}-select-item:hover {
+    background-color: #008fc366 !important;
+  }
+}
+</style>
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  .vent-custom-header{
+    width: 100%;
+    .vent-home-header {
+      width: 100%;
+      height: 100px;
+      position: fixed;
+      top: 0;
+      background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
+      background-size: contain;
+      display: flex;
+      justify-content: center;
+      .header-icon{
+        margin-top: 45px;
+      }
+      .header-text{
+        position: fixed;
+        top: 18px;
+        color: #fff;
+        font-size: 26px;
+      }
+    }
+    .container-title {
+      width: 398px;
+      height: 34px;
+      top: 60px;
+      background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background-size: contain;
+      padding: 0 0 0 180px;
+      font-size: 20px;
+      pointer-events: auto;
+      position: relative;
+
+      .title-select {
+        width: 198px;
+        position: absolute;
+        top: 0;
+        left: 180px;
+      }
+    }
+  }
+  .custom-drop{
+      border-bottom: 1px solid #ececec66 !important;
+      background: transparent !important;
+      backdrop-filter: blur(50px) !important;
+  }
+  :deep(.zxm-select){
+    width: 300px;
+  
+    .@{ventSpace}-select-selector{
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      .zxm-select-selection-item{
+        color: #fff !important;
+        font-size: 20px;
+      }
+    }
+    .@{ventSpace}-select-arrow{
+      color: #fff !important;
+    }
+  }
+</style>

src/views/vent/monitorManager/chamberMonitor/chamber.api.ts

@@ -3,7 +3,7 @@ import { Modal } from 'ant-design-vue';
 
 enum Api {
   list = '/monitor/device',
-  baseList = '/safety/ventanalyWindow/list',
+  baseList = '/safety/ventanalyDeviceInfo/list',
 }
 /**
  * 列表接口

src/views/vent/monitorManager/chamberMonitor/chamber.data.ts

@@ -0,0 +1,62 @@
+import { reactive } from 'vue';
+import { BasicColumn } from '/@/components/Table';
+
+export const warningConfig = reactive({
+  data: [
+    ['火焰6', '318℃', '严重报警', '03-05'],
+    ['测点43', '142℃', '一般预警', '03-05'],
+    ['CO23', '167℃', '一版预警', '03-05'],
+    ['测点6', '198℃', '超高预警', '03-05'],
+    ['测点65', '197℃', '超高预警', '03-05'],
+    ['温度4', '154℃', '一般预警', '03-05'],
+    ['测点61', '104℃', '一般预警', '03-05'],
+    ['测点87', '150℃', '一般信息', '03-05'],
+  ],
+  index: false,
+  // columnWidth: [150, 80, 150, 150],
+  headerBGC: '#3d9dd45d',
+  oddRowBGC: '#009acd10',
+  evenRowBGC: '#009acd05',
+  align: ['center', 'center', 'center'],
+});
+
+export const sensorColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '实时值',
+    dataIndex: 'smokeval',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '报警',
+    dataIndex: 'warnFlag',
+    width: 100,
+    align: 'center',
+  },
+];
+export const dustColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'netStatus',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/monitorManager/chamberMonitor/chamber.threejs.base.ts

@@ -90,7 +90,7 @@ class ChamberBase {
         this.group = gltf[0];
         if (this.group) {
           this.group?.scale.set(0.1, 0.1, 0.1);
-          this.group.position.y += 60;
+          this.group.position.y += 40;
           resolve(null);
           this.addLight();
         }

src/views/vent/monitorManager/chamberMonitor/chamber.threejs.ts

@@ -14,6 +14,7 @@ const appStore = useAppStore();
 // 鼠标点击事件
 const mouseEvent = (event) => {
   event.stopPropagation();
+  if (!model) return;
   const widthScale = appStore.getWidthScale;
   const heightScale = appStore.getHeightScale;
   // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
@@ -73,8 +74,8 @@ export const setModelType = (type) => {
         await animateCamera(
           oldCameraPosition,
           oldCameraPosition,
-          { x: 1.6659700995438462, y: 315.8350412885176, z: 568.1266662409791 },
-          { x: 1.6659700995440048, y: -32.575630674334704, z: 22.306948260174813 },
+          { x: 0.519594036828229, y: 411.8877286329627, z: 330.7728952161751 },
+          { x: 3.534969685817257, y: 14.506061950306899, z: -16.565361577001262 },
           model,
           0.8
         );

src/views/vent/monitorManager/chamberMonitor/components/chamberAlarmHistory.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="alarm-history">
+    <AlarmHistoryTable columns-type="alarm" device-type="pressurefan"
+      :device-list-api="getTableList.bind(null, { strtype: 'pressurefan' })" designScope="alarm-history" />
+  </div>
+</template>
+<script setup lang="ts">
+import AlarmHistoryTable from '../../comment/AlarmHistoryTable.vue';
+import { getTableList } from '../chamber.api'
+const props = defineProps({
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceId: {
+    type: String,
+    required: true,
+  }
+})
+</script>
+<style lang="less" scoped>
+.alarm-history {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/chamberMonitor/components/chamberHandleHistory.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="handle-history">
+    <HandlerHistoryTable columns-type="operatorhistory" device-type="pressurefan"
+      :device-list-api="getTableList.bind(null, { strtype: 'pressurefan' })" designScope="pressurefan_history" />
+  </div>
+</template>
+<script setup lang="ts">
+import HandlerHistoryTable from '../../comment/HandlerHistoryTable.vue';
+import { getTableList } from '../chamber.api'
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    }
+  })
+</script>
+<style lang="less" scoped>
+.handle-history {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/chamberMonitor/components/chamberHistory.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="history-box">
+    <HistoryTable :columns-type="`${deviceType}`" :device-type="deviceType" :sysId="deviceId"
+      :device-list-api="getTableList.bind(null, { strtype: deviceType, sysId: deviceId })" designScope="pressurefan_history" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import HistoryTable from '../../comment/HistoryTable.vue';
+import { getTableList } from '../chamber.api'
+
+const props = defineProps({
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceId: {
+    type: String,
+    required: true,
+  }
+})
+
+</script>
+<style lang="less" scoped>
+.history-box {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/chamberMonitor/components/chamberHome.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="monitor-container">
+    <div class="lr left-box">
+      <div class="monitor-info item-box">
+        <FourBorderBg>
+          <div>
+            <div class="box-title" style="margin-bottom: 10px;">光纤测温实时监测</div>
+            <div class="temperature-group">
+              <div class="temperature-item">
+                <SvgIcon class="icon" size="40" name="aveg-temperature" />
+                <div class="temperature">
+                  <span>平均温度</span>
+                  <span class="value">56.99</span>
+                </div>
+              </div>
+              <div class="temperature-item">
+                <SvgIcon class="icon" size="40" name="max-temperature" />
+                <div class="temperature">
+                  <span>最高温度</span>
+                  <span class="value">56.99</span>
+                </div>
+              </div>
+              <div class="temperature-item">
+                <SvgIcon class="icon" size="40" name="min-temperature" />
+                <div class="temperature">
+                  <span>最低温度</span>
+                  <span class="value">56.99</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="warning-group">
+            <div class="box-title" style="margin-bottom: 10px;">近一月报警情况</div>
+            <div class="warning-item">
+              <div>
+                <SvgIcon class="icon" size="28" name="alarm-fire" />
+                <span class="title">火焰传感器报警</span>
+                <span class="value">无</span>
+              </div>
+              <div>
+                <SvgIcon class="icon" size="28" name="warning-fire" />
+                <span class="title">火焰传感器预警</span>
+                <span class="value">无</span>
+              </div>
+            </div>
+            <div class="warning-item">
+              <div>
+                <SvgIcon class="icon" size="28" name="alarm-smoke" />
+                <span class="title">烟雾传感器报警</span>
+                <span class="value" style="color: #FF3823; font-weight: 600;">15</span>
+              </div>
+              <div>
+                <SvgIcon class="icon" size="28" name="warning-smoke" />
+                <span class="title">烟雾传感器预警</span>
+                <span class="value">无</span>
+              </div>
+            </div>
+            <div class="warning-item">
+              <div>
+                <SvgIcon class="icon" size="28" name="alarm-CO" />
+                <span class="title">CO传感器报警</span>
+                <span class="value">无</span>
+              </div>
+              <div>
+                <SvgIcon class="icon" size="28" name="warning-CO" />
+                <span class="title">CO传感器预警</span>
+                <span class="value">无</span>
+              </div>
+            </div>
+            <div class="warning-item">
+              <div>
+                <SvgIcon class="icon" size="28" name="alarm-temperature" />
+                <span class="title">温度传感器报警</span>
+                <span class="value">无</span>
+              </div>
+              <div>
+                <SvgIcon class="icon" size="28" name="warning-temperature" />
+                <span class="title">温度传感器预警</span>
+                <span class="value" style="color: #FF9B17; font-weight: 600;">10</span>
+              </div>
+            </div>
+            <div class="alarm-box">
+              
+              <dv-scroll-board ref="scrollBoard" :config="warningConfig"
+                style="width: 100%; height: 240px; overflow-y: auto; " />
+            </div>
+            
+          </div>
+          <!-- <div class="base-info">
+            <div class="box-title" style="margin-bottom: 10px;">基本情况</div>
+            <div>
+              <div>
+                <div>火焰传感器</div>
+              </div>
+            </div>
+          </div> -->
+        </FourBorderBg>
+      </div>
+    </div>
+    <div class="lr right-box">
+      <div class="item-box sensor-container">
+        <div class="box-title">烟雾传感器实时监测</div>
+        <a-table :columns="sensorColumns" :data-source="smokeDataSource" :pagination="false" size="small" maxWidth="340"
+          :scroll="{ x: 'max-content', y: 240 }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'warnFlag'">
+              <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+              <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+            </template>
+          </template>
+        </a-table>
+      </div>
+      <div class="item-box">
+        <div class="box-title">喷粉监控</div>
+        <a-table :columns="dustColumns" :data-source="dustDataSource" :pagination="false" size="small" maxWidth="340"
+          :scroll="{ x: 'max-content', y: 240 }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'warnFlag'">
+              <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
+              <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+            </template>
+            <template v-if="column.dataIndex === 'action'">
+              <a-switch v-model:checked="openDust" @change="handleDust" />
+            </template>
+          </template>
+        </a-table>
+      </div>
+      <div class="item-box" >
+        <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, shallowReactive, defineProps, watch } from 'vue';
+// import MonitorTable from '../comment/MonitorTable.vue';
+import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+import { mountedThree, destroy, addChamberText, setModelType } from '../chamber.threejs';
+import { SvgIcon } from '/@/components/Icon';
+import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+import { warningConfig, sensorColumns, dustColumns } from '../chamber.data'
+import { list } from '../chamber.api';
+import LivePlayer from '@liveqing/liveplayer-v3';
+
+
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true
+  }
+})
+
+
+const loading = ref(false);
+
+// 默认初始是第一行
+const openDust = ref(false)
+const fiberDataSource = ref([]); //dusting
+const dustDataSource = ref([]);
+const smokeDataSource = ref([]);
+const temperatureDataSource = ref([]);
+const fireDataSource = ref([]);
+
+// 监测数据
+const selectData = reactive({});
+
+const flvURL1 = () => {
+  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+  // return ''
+};
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(async () => {
+      if (props.deviceId) {
+        const data = await getDataSource(props.deviceId)
+        Object.assign(selectData, data); 
+      }
+      if (timer) {
+        timer = null;
+      }
+      await getMonitor();
+    }, 1000);
+  }
+};
+
+async function getDataSource(systemID) {
+  const res = await list({ devicetype: 'sys', systemID });
+  const result = res.msgTxt;
+  result.forEach(item => {
+
+    if (item.type === 'dusting_auto') {
+      // 喷粉
+      dustDataSource.value = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      })
+
+    }
+    if (item.type === 'fiber_normal') {
+      // 光纤
+      fiberDataSource.value = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      })
+    }
+    if (item.type === 'modelsensor_smoke') {
+      // 烟雾
+      smokeDataSource.value = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      })
+    }
+    if (item.type === 'modelsensor_temperature') {
+      // 温度
+      temperatureDataSource.value = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      })
+    }
+    if (item.type === 'modelsensor_fire') {
+      // 温度
+      fireDataSource.value = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      })
+    }
+    if (item.type === 'sys') {
+      // 硐室基本
+      // fiberDataSource.value = item.filter((data: any) => {
+      //   const readData = data.readData;
+      //   return Object.assign(data, readData);
+      // })
+    }
+  })
+}
+
+
+// 喷粉操作
+function handleDust() {
+  //
+}
+
+onBeforeMount(() => {
+
+});
+
+onMounted(() => {
+  loading.value = true;
+  mountedThree().then(async () => {
+    await setModelType('chamberBase');
+    loading.value = false;
+    timer = null
+    await getMonitor()
+  });
+});
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+
+.monitor-container {
+  width: 100%;
+  height: 100%;
+  // height: 550px;
+  // border: 1px solid #fff;
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+
+  .lr {
+    width: 380px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    pointer-events: auto;
+
+  }
+
+  .right-box {
+    width: 320px;
+  }
+
+  .left-box {
+    margin-top: 30px;
+
+    .monitor-info {
+      padding: 0 10px;
+      .temperature-group {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 10px;
+        
+
+        .temperature-item {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 25px;
+            background: #00d4f944;
+            padding: 8px;
+            margin-right: 5px;
+          }
+
+          .temperature {
+            color: #fff;
+
+            span {
+              display: block;
+
+            }
+          }
+
+          .value {
+            font-family: 'douyuFont';
+            color: #20dbfd;
+            text-shadow: 0 0 25px #00d8ff;
+            font-size: 13px;
+          }
+        }
+      }
+
+      .warning-group {
+        padding: 10px 0;
+        margin-top: 10px;
+
+        .warning-item {
+          display: flex;
+          justify-content: space-between;
+          height: 40px;
+
+          span {
+            display: inline-block;
+          }
+
+          .value {
+            width: 20px;
+          }
+        }
+        .alarm-box{
+          margin-top: 10px;
+          
+        }
+        .title {
+          width: 110px;
+          margin-left: 8px;
+        }
+      }
+
+    }
+  }
+
+  .item-box{
+    margin-bottom: 15px;
+  }
+  .box-title{
+    color: #fff;
+    margin-bottom: 8px;
+    padding-left: 10px;
+    position: relative;
+    font-size: 16px;
+    &::after{
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 7px;
+      left: 0px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
+  }
+
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
+
+.input-box {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+
+  .input-title {
+    color: #73e8fe;
+    width: auto;
+  }
+
+  .@{ventSpace}-input-number {
+    border-color: #ffffff88 !important;
+  }
+
+  margin-right: 10px;
+}</style>

src/views/vent/monitorManager/chamberMonitor/index.vue

@@ -17,177 +17,207 @@
     </div> -->
   </div>
   <div class="scene-box">
-    <div class="title-text">
-      {{ selectData.strname }}
-    </div>
+    <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">硐室监测管控</customHeader>
     <div class="center-container">
-      <div class="lr left-box"></div>
-      <div class="lr right-box">
-        <div class="">
-
-        </div>
-        <div class="">
-
+      <chamberHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' />
+      <div v-else class="history-group">
+        <div class="device-button-group" v-if="deviceList.length > 0">
+          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
         </div>
-      </div>
-    </div>
-    <div class="bottom-tabs-box">
-      <MonitorTable columnsType="fiber_monitor" :dataSource="fiberDataSource" @selectRow="getSelectRow"
-        design-scope="fiber-monitor" title="风窗监测" :scroll="{y: 240}" :isShowPagination="false">
-        <template #filterCell="{ column, record }">
-          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-            record.warnFlag == 0 ? '正常' : '报警'
-          }}</a-tag>
-          <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-            record.netStatus == 0 ? '断开' : '连接'
-          }}</a-tag>
-          <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
-        </template>
-      </MonitorTable>
+        <div class="history-container">
+          <chamberHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+          <chamberHandleHistoryVue v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType" />
+          <chamberAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+        </div> 
+      </div>      
     </div>
+    <BottomMenu @change="changeActive"/>
   </div>
+  
 </template>
 
 <script setup lang="ts">
-// import { message } from 'ant-design-vue';
+import customHeader from '/@/views/vent/comment/components/customHeader.vue';
 import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import { mountedThree, destroy, addChamberText, setModelType } from './chamber.threejs';
 import { list } from './chamber.api';
-import lodash from 'lodash';
+import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+import chamberHome from './components/chamberHome.vue';
+import chamberHistory from './components/chamberHistory.vue';
+import chamberHandleHistoryVue from './components/chamberHandleHistory.vue';
+import chamberAlarmHistory from './components/chamberAlarmHistory.vue';
+import { useRouter } from 'vue-router';
+
+type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 
-const activeKey = ref('1');
+const { currentRoute } = useRouter();
+const activeKey = ref('monitor');
 const loading = ref(false);
 
+const historyTable = ref()
+const alarmHistoryTable = ref()
+const handlerHistoryTable = ref()
+
+
+//关联设备
+const deviceList = ref<DeviceType[]>([])
+const deviceActive = ref('')
+const deviceType = ref('')
+
+const options = ref()
 // 默认初始是第一行
 const selectRowIndex = ref(0);
 const dataSource = ref([])
-const fiberDataSource = ref([]); //dusting
-const dustDataSource = ref([]); 
 
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-};
-
-const initData = {
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-};
+const optionValue = ref('')
 
 // 监测数据
-const selectData = reactive(lodash.cloneDeep(initData));
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-const getMonitor = () => {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      const data = await getSysDataSource();
-      Object.assign(selectData, data);
-
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    }, 1000);
-  }
+const selectData = reactive({});
+
+function changeActive(activeValue) {
+  activeKey.value = activeValue
+}
+
+function deviceChange(index) {
+  deviceActive.value = deviceType.value = deviceList.value[index].deviceType
+}
+
+// 查询关联设备列表
+async function getDeviceList() {
+  const res = await list({ devicetype: 'sys', systemID: optionValue.value });
+  const result = res.msgTxt;
+  const deviceArr = <DeviceType[]>[]
+  result.forEach(item => {
+    const data = item['datalist'].filter((data: any) => {
+      const readData = data.readData;
+      return Object.assign(data, readData);
+    })
+    if (item.type != 'sys') {
+      deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
+    }
+  })
+  deviceList.value = deviceArr
+  deviceActive.value = deviceArr[0].deviceType
+  deviceChange(0)
 };
 
-const getSysDataSource = async () => {
+async function getSysDataSource () {
   const res = await list({ devicetype: 'sys_dongshi', pagetype: 'normal' });
   dataSource.value = res.msgTxt[0].datalist || [];
   dataSource.value.forEach((data: any) => {
     const readData = data.readData;
     data = Object.assign(data, readData);
   });
+  
+  if(!options.value) {
+    // 初始时选择第一条数据
+    options.value = dataSource.value
+    if(!optionValue.value){
+      optionValue.value = dataSource.value[0]['deviceID']
+      Object.assign(selectData, dataSource.value[0])
+    }else{
+      const currentData = dataSource.value.find(item => item['deviceID'] === optionValue.value) || {}
+      Object.assign(selectData, currentData)
+    }
+  }
   const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
   return data;
 };
 
-const getDataSource = async (systemID) => {
-  const res = await list({ devicetype: 'sys', systemID });
-  const result = res.msgTxt[0];
-  result.forEach(item => {
-    if (item.type === 'dusting_auto') {
-      // 喷粉
-      dustDataSource.value = item.filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'fiber_normal') {
-      // 光纤
-      fiberDataSource.value = item.filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'sys') {
-      // 硐室基本
-      // fiberDataSource.value = item.filter((data: any) => {
-      //   const readData = data.readData;
-      //   return Object.assign(data, readData);
-      // })
-    }
-  })
-}
-
-
 // 切换检测数据
-const getSelectRow = (selectRow, index) => {
-  if (!selectRow) return;
-  selectRowIndex.value = index;
-
-  Object.assign(selectData, initData, selectRow);
-  getDataSource(selectData.deviceID)
-  // setModelType(type).then(() => {
-   
-  // });
+function getSelectRow(deviceID){
+  const currentData = dataSource.value.find((item: any) => {
+    return item.deviceID == deviceID
+  })
+  if(currentData){
+    optionValue.value = currentData['deviceID']
+    Object.assign(selectData, currentData)
+  }
 }
 
 onBeforeMount(() => {
 
 });
 
-onMounted(() => {
-  loading.value = true;
-  mountedThree().then(async () => {
-    await setModelType('chamberBase');
-    loading.value = false;
-    getMonitor();
-  });
+onMounted(async() => {
+  if (currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
+  await getSysDataSource()
+  await getDeviceList()
 });
+
 onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
+ 
 });
 </script>
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
 @ventSpace: zxm;
-
-.center-container{
-  width: 100%;
-  height: 550px;
-  border: 1px solid #fff;
-  margin-top: 30px;
-  display: flex;
-  justify-content: space-between;
-  .lr{
-    width: 250px;
-    height: 100%;
-    border: 1px solid #73e8fe;
-    display: flex;
-    flex-direction: column;
+.scene-box{
+  pointer-events: none;
+  .history-group{
+    padding: 0 20px;
+    .history-container{
+      position: relative;
+      background: #6176AF11;
+      width: calc(100% + 10px);
+      top: 0px;
+      left: -10px;
+      border: 1px solid #ffffff22;
+      padding: 10px 0;
+    }
   }
-  .right-box{
-    width: 280px;
+  .device-button-group{
+    // margin: 0 20px;
+    display: flex;
+    pointer-events: auto;
+    position: relative;
+    margin-top: 90px;
+    &::after{
+      position:absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid #0efcff;
+    }
+    .device-button{
+      padding: 4px 15px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      
+      color: #fff;
+      cursor: pointer;
+      margin: 0 3px;
+
+      &::before{
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid #6176AF;
+        transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103,85%);
+        z-index: -1;
+      }
+    }
+    .device-active{
+      // color: #0efcff;
+      &::before{
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      }
+    }
   }
 }
+.center-container{
+  width: 100%;
+  height: calc(100% - 200px);
+}
 
 :deep(.@{ventSpace}-tabs-tabpane-active) {
   overflow: auto;

src/views/vent/monitorManager/comment/AlarmHistoryTable.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="alarm-history-table">
-    <BasicTable @register="registerTable" />
+    <BasicTable ref="alarmHistory" @register="registerTable" />
   </div>
 </template>
 
 <script lang="ts" name="system-user" setup>
   //ts语法
+  import { watch, ref, defineExpose } from 'vue'
   import { BasicTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { defHttp } from '/@/utils/http/axios';
+import { prefetchApps } from 'qiankun';
 
   const list = (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params });
 
@@ -29,13 +31,43 @@
     designScope: {
       type: String,
     },
+    sysId: {
+      type: String,
+    },
     scroll: {
       type: Object,
       default: () => { }
     }
   });
+  const alarmHistory = ref()
+  const columns = ref([])
+
+  watch(
+    () => {
+      return props.columnsType;
+    },
+    (newVal) => {
+      const column = getTableHeaderColumns(newVal + '_history')
+      if (column && column.length < 1) {
+        const arr = newVal.split('_')
+        const columnKey = arr.reduce((prev, cur, index) => {
+          if (index !== arr.length - 2) {
+            return prev + '_' + cur
+          } else {
+            return prev
+          }
+        })
+        columns.value = getTableHeaderColumns(arr[0] + '_history');
+      } else {
+        columns.value = column
+      }
+      if (alarmHistory.value) reload()
+    },
+    {
+      immediate: true
+    }
+  );
 
-  const columns = getTableHeaderColumns(props.columnsType);
   // 列表页面公共参数、方法
   const { tableContext } = useListPage({
     tableProps: {
@@ -84,11 +116,15 @@
       },
       beforeFetch(params) {
         params.gdevicetype = props.deviceType + '*';
+        if (props.sysId) {
+          params.sysId = props.sysId;
+        }
       },
     },
   });
   //注册table数据
-  const [registerTable] = tableContext;
+  const [registerTable, { reload, setLoading }] = tableContext;
+  defineExpose({ setLoading })
 </script>
 
 <style scoped lang="less">

src/views/vent/monitorManager/comment/HandlerHistoryTable.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="handler-history-table">
-    <BasicTable @register="registerTable" />
+    <BasicTable ref="handlerHistory" @register="registerTable" />
   </div>
 </template>
 
 <script lang="ts" name="system-user" setup>
   //ts语法
-  import { watch } from 'vue';
+  import { watch, ref, defineExpose } from 'vue';
   import { BasicTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
@@ -31,13 +31,45 @@
     designScope: {
       type: String,
     },
+    sysId: {
+      type: String,
+    },
     scroll: {
       type: Object,
       default: () => {}
     }
   });
   
-  const columns = getTableHeaderColumns(props.columnsType);
+  const handlerHistory = ref()
+  const columns = ref([])
+
+  watch(
+    () => {
+      return props.columnsType;
+    },
+    (newVal) => {
+      const column = getTableHeaderColumns(newVal)
+      debugger
+      if (column && column.length < 1) {
+        const arr = newVal.split('_')
+        const columnKey = arr.reduce((prev, cur, index) => {
+          if (index !== arr.length - 2) {
+            return prev + '_' + cur
+          } else {
+            return prev
+          }
+        })
+        columns.value = getTableHeaderColumns(arr[0] + '_history');
+      } else {
+        columns.value = column
+      }
+      if (handlerHistory.value) reload()
+    },
+    {
+      immediate: true
+    }
+  );
+
   // 列表页面公共参数、方法
   const { tableContext } = useListPage({
     tableProps: {
@@ -85,12 +117,15 @@
       },
       beforeFetch(params) {
         params.gdevicetype = props.deviceType + '*';
+        if (props.sysId) {
+          params.sysId = props.sysId;
+        }
       },
     },
   });
   //注册table数据
-  const [registerTable, { reload }] = tableContext;
-  
+  const [registerTable, { reload, setLoading }] = tableContext;
+  defineExpose({ setLoading })
 </script>
 
 <style scoped lang="less">

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" name="system-user" setup>
   //ts语法
-  import { watchEffect, ref } from 'vue';
+  import { watchEffect, ref, watch, defineExpose } from 'vue';
   import { BasicTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
@@ -35,13 +35,41 @@
     designScope: {
       type: String,
     },
+    sysId: {
+      type: String,
+    },
     scroll: {
       type: Object,
       default: () => { }
     }
   });
+  const columns = ref([])
 
-  const columns = getTableHeaderColumns(props.columnsType);
+  watch(
+  () => {
+    return props.columnsType;
+  },
+  (newVal) => {
+    const column = getTableHeaderColumns(newVal + '_history')
+    if (column && column.length < 1) {
+      const arr = newVal.split('_')
+      const columnKey = arr.reduce((prev, cur, index) => {
+        if (index !== arr.length - 2) {
+          return prev + '_' + cur
+        } else {
+          return prev
+        }
+      })
+      columns.value = getTableHeaderColumns(arr[0] + '_history');
+    } else {
+      columns.value = column
+    }
+    if(historyTable.value) reload()
+  },
+  {
+    immediate: true
+  }
+);
 
   // 列表页面公共参数、方法
   const { tableContext } = useListPage({
@@ -140,6 +168,9 @@
       },
       beforeFetch(params) {
         params.strtype = props.deviceType + '*';
+        if(props.sysId){
+          params.sysId = props.sysId;
+        }
       },
       afterFetch(resultItems) {
         resultItems.map((item) => {
@@ -150,7 +181,7 @@
     },
   });
   //注册table数据
-  const [registerTable, { getDataSource }] = tableContext;
+  const [registerTable, { getDataSource, reload, setLoading }] = tableContext;
 
   watchEffect(() => {
     if (historyTable.value && getDataSource) {
@@ -159,6 +190,8 @@
       console.log('[ data ] >', data);
     }
   });
+
+  defineExpose({ setLoading })
 </script>
 
 <style scoped lang="less">

src/views/vent/monitorManager/comment/MonitorTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vent-table">
-    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="props.isShowSelect ? rowSelection: undefined" :loading="loading">
+    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="props.isShowSelect ? rowSelection: undefined">
       <template #tableTitle>
         <div></div>
       </template>
@@ -65,7 +65,7 @@
   });
   const emits = defineEmits(['selectRow']);
   const dataTableSource = ref<any[]>([]);
-  const loading = ref(true);
+  // const loading = ref(true);
 
   const ventTableRef = ref();
 
@@ -77,7 +77,7 @@
       return props.dataSource;
     },
     (newVal, oldVal) => {
-      if (oldVal.length < 1 && newVal.length > 0) {
+      if (oldVal && newVal && oldVal.length < 1 && newVal.length > 0) {
         // 第一次
         setSelectedRowKeys([newVal[0].deviceID]);
       }
@@ -86,7 +86,10 @@
         list.push(toRaw(item));
       });
       dataTableSource.value = list;
-      loading.value = false;
+      if(ventTableRef.value) setLoading(false)
+    },
+    {
+      immediate: true
     }
   );
    watch(
@@ -94,7 +97,20 @@
       return props.columnsType;
     },
     (newVal) => {
-      columns.value = getTableHeaderColumns(newVal);
+      const column =  getTableHeaderColumns(newVal)
+      if(column && column.length < 1){
+        const arr = newVal.split('_')
+        const columnKey =  arr.reduce((prev, cur, index) => {
+          if(index !== arr.length - 2){
+            return prev + '_' + cur
+          }else {
+            return prev
+          }
+        })
+        columns.value = getTableHeaderColumns(arr[0]+'_monitor');
+      }else{
+        columns.value = column
+      }
     },
     {
       immediate: true
@@ -118,6 +134,7 @@
       scroll: props.scroll,
       rowKey: 'deviceID',
       // striped: true,
+      loading: true,
       actionColumn: {
         width: 180,
       },
@@ -133,7 +150,7 @@
   });
 
   //注册table数据
-  const [registerTable, { reload, setLoading, setSelectedRowKeys }, { rowSelection, selectedRowKeys }] = tableContext;
+  const [registerTable, { reload, setLoading, setSelectedRowKeys }, { rowSelection, selectedRowKeys,  }] = tableContext;
   watch(
     selectedRowKeys,
     (oldKeys, newKeys) => {
@@ -148,6 +165,7 @@
   defineExpose({
     doRequest,
     setSelectedRowKeys,
+    setLoading
   });
 
   onMounted(() => {

src/views/vent/monitorManager/compressor/components/nitrogenAlarmHistory.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="alarm-history">
+     <AlarmHistoryTable columns-type="alarm" device-type="nitrogen" :device-list-api="getTableList.bind(null, { devicekind: 'nitrogen' })" designScope="alarm-history" />
+  </div>
+</template>
+<script setup lang="ts">
+  import AlarmHistoryTable from '../../comment/AlarmHistoryTable.vue';
+  import { getTableList } from '../nitrogen.api'
+
+</script>
+<style lang="less" scoped>
+  .alarm-history{
+    width: 100%;
+    position: fixed;
+    top: 80px;
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenEcharts.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="nitrogen-echatrs-box">  
+    <div class="button-box">
+      <div style="color: #fff; font-weight: 600;">{{ currentTime }}</div>
+    </div>
+    <div class="echarts-container">
+      <div v-for="(item, index) in dataSource" :key="index" class="echarts-item">
+        <div class="echarts-nitrogen-item">
+          <BarAndLine
+          xAxisPropType="readTime"
+          :dataSource="item"
+          height="100%"
+          :chartsColumns="nitrogenChartsColumns"
+          :option="nitrogenOption"
+          chartsType="detail" />
+        </div>
+        <div class="echarts-cqg-item">
+          <BarAndLine
+            xAxisPropType="readTime"
+            :dataSource="item"
+            height="100%"
+            :chartsColumns="cqgChartsColumns"
+            :option="cqgOption"
+            chartsType="detail" />
+        </div>
+      </div>    
+    </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+    import{ref, onMounted, onUnmounted, reactive } from 'vue'
+    import dayjs from 'dayjs'
+    import BarAndLine from '/@/components/chart/BarAndLine.vue';
+    import { list } from '../nitrogen.api'
+
+    const nitrogenChartsColumns = [
+      {
+        legend: '空压机排气压力',
+        seriesName: '(Mpa)',
+        ymax: 100,
+        yname: 'Pa',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#9BCB75',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'compressExhaustPressF1',
+      },
+      {
+        legend: '空压机分离压力',
+        seriesName: '(Mpa)',
+        ymax: 100,
+        yname: 'Mpa',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#1EB0FC',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'compressSeparatePressF1',
+      },
+      {
+        legend: '空压机主机温度',
+        seriesName: '(℃)',
+        ymax: 200,
+        yname: '℃',
+        linetype: 'line',
+        yaxispos: 'right',
+        color: '#FDB146',
+        sort: 2,
+        xRotate: 0,
+        dataIndex: 'compressHostTempF1',
+      },
+      {
+        legend: '空压机机组温度',
+        seriesName: '(℃)',
+        ymax: 200,
+        yname: '℃',
+        linetype: 'line',
+        yaxispos: 'right',
+        color: '#EE6666',
+        sort: 2,
+        xRotate: 0,
+        dataIndex: 'compressCrewTempF1',
+      },
+    ];
+    const cqgChartsColumns = [
+    {
+      legend: '储气罐压力',
+      seriesName: '(Mpa)',
+      ymax: 100,
+      yname: 'Pa',
+      linetype: 'line',
+      yaxispos: 'left',
+      color: '#9BCB75',
+      sort: 1,
+      xRotate: 0,
+      dataIndex: 'airReceiverPress',
+    },
+    {
+      legend: '储气罐温度',
+      seriesName: '(℃)',
+      ymax: 100,
+      yname: '℃',
+      linetype: 'line',
+      yaxispos: 'right',
+      color: '#DD7FCD',
+      sort: 2,
+      xRotate: 0,
+      dataIndex: 'airReceiverTemp',
+    },
+    {
+      legend: '储气罐流量',
+      seriesName: '(m³/k)',
+      ymax: 200,
+      yname: 'm³/k',
+      linetype: 'line',
+      yaxispos: 'right',
+      color: '#56B1FD',
+      sort: 3,
+      xRotate: 0,
+      dataIndex: 'airReceiverFlow',
+    },
+  ];
+
+    const nitrogenOption = {
+      grid: {
+        top: '20%',
+        left: '2px',
+        right: '0px',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature:{
+          
+        }
+      }
+    }
+
+    const cqgOption = {
+      grid: {
+        top: '20%',
+        left: '0px',
+        right: '40px',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature: {
+
+        }
+      }
+    }
+
+    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+    // const monitorData = [] as any[]
+    const dataSource = reactive<any[]>([])
+
+    // https获取监测数据
+    let timer: null | NodeJS.Timeout = null;
+    let count = 0
+    async function getMonitor() {
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = await setTimeout(async () => {
+          await getDataSource();
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+        }, 1000);
+      }
+    };
+
+    async function getDataSource() {
+      
+      const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
+      const dataList = res.msgTxt[0].datalist || [];
+      dataList.forEach((data, index) => {
+        const item = data.readData;
+        Object.assign(item, data);
+        item['readTime'] = item['readTime'].substring(11)
+        if(count == 0){
+          dataSource.push([item])
+        }else {
+          if(dataSource[index].length < 10){
+            dataSource[index].push(item)
+          }else {
+            dataSource[index].shift()
+            dataSource[index].push(item)
+          }
+        }
+      });
+      count++ // 实时数据累计
+      console.log('实时监测数据----->', dataSource)
+    };
+
+    onMounted(() => {
+      getMonitor()
+    })
+
+    onUnmounted(() => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+    });
+
+</script>
+<style lang="less" scoped>
+  .button-box{
+    text-align: end;
+    margin-top: 10px;
+    margin-right: 10px;
+  }
+  .nitrogen-echatrs-box{
+    width: 100%;
+    height: 100%;
+  }
+  .echarts-container{
+    position: fixed;
+    width: 100%;
+    height: 730px;
+    color: #fff;
+    overflow: scroll;
+    top: 100px;
+    display: flex;
+    flex-direction: column;
+    z-index: 99999;
+    
+    .echarts-item{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .echarts-nitrogen-item{
+        width: calc(60% - 30px);
+        height: 240px;
+      }
+      .echarts-cqg-item{
+        width: calc(40% - 10px);
+        height: 240px;
+      }
+    }
+    
+  }
+
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHandleHistory.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="handle-history">
+     <HandlerHistoryTable columns-type="operatorhistory" device-type="nitrogen" :device-list-api="getTableList.bind(null, {devicekind :'nitrogen'})" designScope="nitrogen_history" />
+  </div>
+</template>
+<script setup lang="ts">
+  import HandlerHistoryTable from '../../comment/HandlerHistoryTable.vue';
+  import { getTableList } from '../nitrogen.api'
+
+</script>
+<style lang="less" scoped>
+  .handle-history{
+    position: fixed;
+    top: 80px;
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHistory.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="nitrogen-history">
+     <HistoryTable columns-type="nitrogen" device-type="nitrogen" :device-list-api="getTableList.bind(null, {devicekind :'nitrogen'})" designScope="nitrogen_auto_history" />
+  </div>
+</template>
+<script setup lang="ts">
+  import HistoryTable from '../../comment/HistoryTable.vue';
+  import { getTableList } from '../nitrogen.api'
+
+</script>
+<style lang="less" scoped>
+  .nitrogen-history{
+    position: fixed;
+    top: 80px;
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHome.vue

@@ -0,0 +1,642 @@
+<template>
+    <div id="nitrogenCss3D" class="threejs-Object-CSS"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
+      <a-spin :spinning="loading" />
+      <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
+        <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+          <div class="title">{{ groupNum }}号制氮机 </div>
+          <div class="monitor-item">
+            <span class="monitor-title">注氮压力:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenPressure'] ?
+              monitorData[groupNum - 1]['nitrogenPressure'] : '-' }}</span><span class="unit">Mpa</span></span>
+          </div>
+          <div class="monitor-item">
+            <span class="monitor-title">氮气实时流量:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['instantaneousFlow'] ?
+              monitorData[groupNum - 1]['instantaneousFlow'] : '-' }}</span><span class="unit">m³/h</span></span>
+          </div>
+          <div class="monitor-item">
+            <span class="monitor-title">氮气浓度:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenContent'] ?
+              monitorData[groupNum - 1]['nitrogenContent'] : '-' }}</span><span class="unit">%</span></span>
+          </div>
+          <div class="signal-item">
+            <div class="signal"><span class="monitor-title">运行信号</span><span
+                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'] }"></span>
+            </div>
+            <div class="signal"><span class="monitor-title">加载信号</span><span
+                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'] }"></span>
+            </div>
+          </div>
+        </fourBorderBg>
+      </div>
+    </div>
+    <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div class="nitrogen-home">
+      <div class="nitrogen-container">
+        <div class="top-box">
+          <!-- 左边监测数据 -->
+          <div class="lr-box left-box">
+            <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+              <ventBox1>
+                <template #title>
+                  <div>{{ groupNum }}号制氮机组</div>
+                </template>
+                <template #container>
+                  <div class="monitor-box">
+                    <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="38" name="device-group-paramer"/><span>机组参数</span></div>
+                    <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
+                      </div>
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="monitor-box">
+                    <div class="parameter-title device-parameter-title"><SvgIcon class="icon" size="32" name="device-paramer"/><span>电机数据</span></div>
+                    <div class="state-item" v-for="(data, index) in deviceParameterData" :key="index">
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
+                      </div>
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </ventBox1>
+            </div>
+          </div>
+          <!-- 右边控制状态 -->
+          <div class="lr-box right-box">
+            <ventBox1>
+              <template #title>
+                <div>远程控制</div>
+              </template>
+              <template #container>
+                <div class="control-group">
+                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                    <div class="control-item-title">{{ zdjs[groupNum - 1] }}</div>
+                    <div class="control-item-state">
+                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
+                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1])">
+                      </a-switch>
+                    </div>
+                  </div>
+                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                    <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
+                    <div class="control-item-state">
+                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
+                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1])">
+                      </a-switch>
+                    </div>
+                  </div>
+                  <div class="control-item">
+                    <div class="control-item-title">是否开启联动</div>
+                    <div class="control-item-state">
+                      <a-radio v-model:checked="isLink">开启</a-radio>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </ventBox1>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+<script lang="ts" setup name="nitrogenHome">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import ventBox1 from '/@/components/vent/ventBox1.vue'
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
+import { mountedThree, destroy } from '../nitrogen.threejs'
+import { list } from '../nitrogen.api'
+import { SvgIcon } from '/@/components/Icon'
+
+const loading = ref(true)
+const isLink = ref(true)
+
+const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
+const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+
+const monitorDataGroupNum = ref(0);
+
+const airCompressorState = ref([
+  {
+    id: '',
+    compressRunSigF1: false,
+    controlModel: false
+  },
+  {
+    id: '',
+    compressRunSigF1: false,
+    controlModel: false
+  },
+  {
+    id: '',
+    compressRunSigF1: false,
+    controlModel: false
+  },
+  {
+    id: '',
+    compressRunSigF1: false,
+    controlModel: false
+  }
+]);
+
+const groupParameterData = [
+  {
+    cumulativeFlow: '累计流量(m³)',
+    centerTemperature: '加热器中心温度',
+  },
+  {
+    outletTemperature: '加热器出口温度',
+  },
+];
+const deviceParameterData = [
+  {
+    Ia: 'A项电流(A)',
+    Ib: 'B项电流(A)',
+  },
+  {
+    Ic: 'c项电流(A)',
+    Vab: 'AB项间电压(V)',
+  },
+  {
+    Vac: 'AC项间电压(V)',
+    Vbc: 'BC项间电压(V)',
+  },
+];
+
+const monitorData = ref(new Array(3).fill({
+  strName: '空压机',
+  compressGroupName: '',
+  compressExhaustPressF1: '-',
+  compressSeparatePressF1: '-',
+  compressHostTempF1: '-',
+  compressCrewTempF1: '-',
+  compressRunTimeF1: '-',
+  controlModel: 'LOC'
+}));
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+async function getMonitor() {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = await setTimeout(async () => {
+      await getDataSource();
+      if (timer) {
+        timer = null;
+      }
+      await getMonitor();
+    }, 1000);
+  }
+};
+
+async function getDataSource() {
+  const res = await list({ devicetype: 'nitrogen_auto', pagetype: 'normal' });
+  const dataSource = res.msgTxt[0].datalist || [];
+  monitorData.value = dataSource.filter((data) => {
+    const item = data.readData;
+    Object.assign(data, item);
+    return item
+  });
+  monitorDataGroupNum.value = monitorData.value.length
+  loading.value = false
+};
+
+function handlerDevice(data) {
+  // if (data.length < 1) return
+  // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
+  //   if (res.success) {
+  //     message.success('操作成功')
+  //   } else {
+  //     message.warning(data.msg)
+  //   }
+  // })
+};
+function resetDevice(data) {
+
+}
+
+function handlerControlModel(data) {
+
+}
+
+watch(monitorDataGroupNum, (newVal) => {
+  if (newVal) {
+    destroy()
+    mountedThree(newVal)
+  }
+})
+onMounted(async () => {
+  await getMonitor()
+})
+
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
+
+</script>
+
+<style lang="less" scoped>
+@ventSpace: zxm;
+
+.nitrogen-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+#nitrogenCss3D {
+  .modal-monitor {
+    width: 200px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+  &:deep(.win) {
+    margin: 0 !important;
+  }
+
+}
+
+.nitrogen-home {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  top: 60px;
+  .nitrogen-container {
+    width: 100%;
+    height: calc(100%);
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 100px;
+
+    .top-box {
+      width: 100%;
+      padding: 10px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+
+      .lr-box {
+        height: fit-content;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        z-index: 9999;
+        pointer-events: auto;
+      }
+
+      .item {
+        width: 335px;
+        height: auto;
+        position: relative;
+        border-radius: 5px;
+        margin-top: 10px;
+        margin-bottom: 0px;
+        pointer-events: auto;
+        color: #fff;
+        overflow: hidden;
+        
+        
+        .base-title {
+          color: #fff;
+          margin-bottom: 8px;
+          padding-left: 10px;
+          position: relative;
+          font-size: 16px;
+          &::after{
+            content: '';
+            position: absolute;
+            display: block;
+            width: 4px;
+            height: 12px;
+            top: 7px;
+            left: 0px;
+            background: #45d3fd;
+            border-radius: 4px;
+          }
+        }
+
+        .state-item {
+          display: flex;
+          flex-direction: row;
+          padding: 5px;
+
+          .item-col {
+            width: calc(50% - 5px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-right: 4px;
+            background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
+            &:first-child{
+              margin-right: 10px;
+            }
+
+            .state-title {
+              color: #ffffffcc;
+              flex: 9;
+              font-size: 14px;
+            }
+
+            .state-val {
+              flex: 1;
+              color: #00eefffe;
+              margin-right: 5px;
+              text-align: right;
+              font-size: 14px;
+            }
+          }
+        }
+
+        .signal-box {
+          margin: 5px 0;
+          display: flex;
+          align-items: center;
+
+          .signal-title {
+            color: #7AF5FF;
+            margin: 0 5px;
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+
+        .list-item {
+          padding: 0 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .item-data-key {
+            color: #ffffff99;
+          }
+        }
+
+        .item-data-box {
+          color: #fff;
+
+          .state-icon {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 12px;
+          }
+
+          .open {
+            border: 5px solid #133a56;
+            background: #4ecb73;
+          }
+
+          .close {
+            border: 5px solid #192961;
+            background: #6d7898;
+          }
+        }
+      }
+
+      .item-l {
+        width: 100%;
+        .monitor-box {
+          width: 100%;
+          .parameter-title{
+            position: relative;
+            width: 100%;
+            height: 14px;
+            margin-top: 10px;
+            .icon, span{
+              position: absolute;
+              top: -10px;
+            }
+            
+          }
+          .group-parameter-title{
+            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+            
+            .icon{
+              left: -12px;
+              top: -17px;
+            }
+            span{
+              left: 18px;
+            }
+            .item-col{
+              background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
+            }
+          }
+          .device-parameter-title{
+            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+            .icon{
+              left: -10px;
+              top: -14px;
+            }
+            span{
+              left: 18px;
+            }
+            .item-col{
+              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+            }
+          }
+          
+        }
+      }
+
+      .right-box {
+        .control-group{
+          display: flex;
+          // justify-content: space-around;
+          flex-wrap: wrap;
+          .control-item {
+            
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 0 13px;
+            .control-item-title{
+              color: #A6DCE9;
+              position: relative;
+              top: 5px;
+            }
+            .control-item-state{
+              width: 94px;
+              height: 47px;
+              background: url('/@/assets/images/vent/control-switch-bg.png');
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+            }
+          
+            .button-box {
+              position: relative;
+              padding: 5px;
+              border: 1px transparent solid;
+              background-clip: border-box;
+              border-radius: 5px;
+              margin-left: 8px;
+            }
+
+            .a-button {
+              pointer-events: auto;
+            }
+
+            &::v-deep .a-button--mini {
+              padding: 6px 10px;
+            }
+
+            &::v-deep .a-button--mini.is-round {
+              padding: 6px 10px;
+            }
+          }
+
+        }
+      }
+
+      .left-box {
+        width: 385px;
+        
+      }
+    }
+    &:deep(.win) {
+      width: 100%;
+      margin: 0 !important;
+    }
+  }
+  
+}
+  
+
+  &:deep(.main) {
+    .title {
+      height: 34px;
+      text-align: center;
+      font-weight: 600;
+      color: #7AF5FF;
+      // background-image: url('../../../assets/img/yfj/light.png');
+      background-repeat: no-repeat;
+      background-position-x: center;
+      background-position-y: 100%;
+      background-size: 80%;
+      font-size: 16px;
+    }
+
+    .monitor-item {
+      width: 200px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 80px;
+          font-size: 14px;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 14px;
+
+        }
+      }
+    }
+
+    .monitor-title {
+      width: 100px;
+      color: #7AF5FF;
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .signal-item {
+      display: flex;
+      justify-content: space-between;
+
+      // margin-bottom: 5px;
+      .signal-round {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin: 0 10px;
+        position: relative;
+
+        &::after {
+          display: block;
+          content: '';
+          position: absolute;
+          width: 12px;
+          height: 12px;
+          top: -2px;
+          left: -2px;
+          border-radius: 50%;
+        }
+      }
+
+      .signal-round-gry {
+        background-color: #858585;
+
+        &::after {
+          background-color: #85858544;
+          box-shadow: 0 0 1px 1px #85858599;
+        }
+      }
+
+      .signal-round-run {
+        background-color: #67FC00;
+
+        &::after {
+          background-color: #67FC0044;
+          box-shadow: 0 0 1px 1px #c6ff77;
+        }
+      }
+
+      .signal-round-warning {
+        background-color: #E9170B;
+
+        &::after {
+          background-color: #E9170B44;
+          box-shadow: 0 0 1px 1px #E9170B;
+        }
+      }
+    }
+  }
+  :deep(.zxm-radio-wrapper){
+    color: #fff !important;
+  }
+
+</style>

src/views/vent/monitorManager/compressor/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="nitrogen-box">
+    <div class="nitrogen-home-header">
+      <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
+      <div class="header-text">智能注氮管控系统</div>
+    </div>
+    <nitrogenHome v-if="btnActive == 'nitrogen_page'" />
+    <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'"/>
+    <nitrogenHistory v-if="btnActive == 'yfj_history'"/>
+    <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'"/>
+    <nitrogenAlarmHistory v-if="btnActive == 'yfj_faultRecord'"/>
+    <BottomMenu :nav-list="navList" @change="changeActive"/>
+  </div>
+  
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import nitrogenHome from './components/nitrogenHome.vue'
+import nitrogenEcharts from './components/nitrogenEcharts.vue'
+import nitrogenHistory from './components/nitrogenHistory.vue'
+import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
+import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue'
+import { Decoration5 } from '@kjgl77/datav-vue3'
+import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+
+const btnActive = ref('nitrogen_page')
+const navList = ref([
+  {
+    title: '监控界面',
+    pathName: 'nitrogen_page',
+    isHover: true
+  },
+  {
+    title: '历史监测记录',
+    pathName: 'yfj_history',
+    isHover: false
+  },
+  {
+    title: '操作历史记录',
+    pathName: 'yfj_handler_history',
+    isHover: false
+  },
+  {
+    title: '故障诊断历史记录',
+    pathName: 'yfj_faultRecord',
+    isHover: false
+  }
+])
+
+
+function changeActive(activeValue) {
+  btnActive.value = activeValue
+}
+
+</script>
+
+<style lang="less" scoped>
+@ventSpace: zxm;
+.nitrogen-home-header {
+    width: 100%;
+    height: 100px;
+    position: fixed;
+    top: 0;
+    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+
+    .header-icon {
+      margin-top: 45px;
+    }
+
+    .header-text {
+      position: fixed;
+      top: 18px;
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+.nitrogen-box{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  .bottom-btn-group {
+    display: flex;
+    position: fixed;
+    width: calc(100% - 400px);
+    height: 100px;
+    bottom: 10px;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    .btn-item {
+      width: 200px;
+      height: 60px;
+      margin: 10px;
+      color: #fff;
+      cursor: pointer;
+      pointer-events: auto;
+    }
+  }
+  &:deep(.win) {
+    margin: 0 !important;
+  }
+}
+
+
+</style>

src/views/vent/monitorManager/compressor/nitrogen.api.ts

@@ -0,0 +1,17 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/monitor/device',
+  baseList = '/safety/ventanalyDeviceInfo/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });

src/views/vent/monitorManager/compressor/nitrogen.data.ts

@@ -0,0 +1,72 @@
+import { ref } from 'vue';
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+
+
+      // dataInfo: {
+      //   controlModel: false
+      // };
+      // videoUrl: '',
+      // isDestroyVideo: false,
+      // navList: [
+      //   {
+      //     title: '监控界面',
+      //     pathName: 'nitrogen_page_lh'
+      //   },
+      //   // {
+      //   //   title: '关键节点监测',
+      //   //   pathName: 'critical_node'
+      //   // },
+      //   {
+      //     title: '实时曲线',
+      //     pathName: 'yfj_monitor_echarts_cy'
+      //   },
+      //   {
+      //     title: '压风机历史记录',
+      //     pathName: 'yfj_history'
+      //   },
+      //   {
+      //     title: '操作历史记录',
+      //     pathName: 'yfj_handler_history'
+      //   },
+      //   {
+      //     title: '故障诊断历史记录',
+      //     pathName: 'yfj_faultRecord'
+      //   }
+      // ],
+      // kyjMonitorDataKey: new Map(
+      //   [
+      //     ['压力', 'pressure'],
+      //     ['温度', 'temp'],
+      //   ]
+      // ),

src/views/vent/monitorManager/compressor/nitrogen.dishang.threejs.ts

@@ -0,0 +1,239 @@
+import * as THREE from 'three';
+import { getTextCanvas, addEnvMap, setModalCenter } from '/@/utils/threejs/util';
+import { CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class Nitrogen {
+  model;
+  modelName = 'nitrogen';
+  group: THREE.Object3D = new THREE.Object3D();
+  animationTimer;
+  isLRAnimation = true;
+  direction = 1;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+  deviceRunState = '';
+  nitrogenNum = 0;
+
+  constructor(model) {
+    this.model = model;
+    this.group.name = this.modelName;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(75, 96, 177);
+    this.group.add(directionalLight);
+    directionalLight.target = this.group;
+
+    // gui.add(directionalLight.position, 'x', -500, 500).onChange(function (value) {
+    //   directionalLight.position.x = Number(value);
+    // });
+    // gui.add(directionalLight.position, 'y', -500, 500).onChange(function (value) {
+    //   directionalLight.position.y = Number(value);
+    // });
+    // gui.add(directionalLight.position, 'z', -200, 200).onChange(function (value) {
+    //   directionalLight.position.z = Number(value);
+    // });
+
+    const spotLight = new THREE.SpotLight();
+    spotLight.angle = Math.PI / 4;
+    spotLight.penumbra = 0;
+    spotLight.castShadow = true;
+    spotLight.distance = 0;
+    spotLight.position.set(-88, 85, -88);
+    spotLight.target = this.group;
+    this.group.add(spotLight);
+
+    spotLight.shadow.camera.near = 0.5; // default
+    spotLight.shadow.camera.far = 1000; // default
+    spotLight.shadow.focus = 1;
+    spotLight.shadow.bias = -0.000002;
+
+    // gui.add(spotLight.position, 'x', -800, 800).onChange(function (value) {
+    //   spotLight.position.x = Number(value);
+    // });
+    // gui.add(spotLight.position, 'y', -800, 800).onChange(function (value) {
+    //   spotLight.position.y = Number(value);
+    // });
+    // gui.add(spotLight.position, 'z', -800, 800).onChange(function (value) {
+    //   spotLight.position.z = Number(value);
+    // });
+  }
+
+  // 设置模型位置
+  setModalPosition() {
+    if (this.nitrogenNum == 4) {
+      this.group.position.set(0, -17, 3);
+      this.group?.scale.set(24.0, 24.0, 24.0);
+    }
+    if (this.nitrogenNum == 3) {
+      this.group.position.set(0, -1, 3);
+      this.group?.scale.set(24.0, 24.0, 24.0);
+    }
+    if (this.nitrogenNum == 2) {
+      this.group.position.set(0, 0.42, 1.21);
+      this.group?.scale.set(24.0, 24.0, 24.0);
+    }
+    if (this.nitrogenNum == 1) {
+      this.group.position.set(0, 8, 3.0);
+      this.group?.scale.set(24.0, 24.0, 24.0);
+    }
+  }
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {}
+
+  /* 点击 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    this.isLRAnimation = false;
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+
+    intersects.find((intersect) => {
+      const mesh = intersect.object;
+
+      return false;
+    });
+  }
+
+  mouseUpModel() {}
+
+  // 播放动画
+  play() {}
+  /**
+   * 生序排列模型的子元素
+   */
+  sortMeshChildren = (children: THREE.Mesh[]) => {
+    //生序排列
+    children.sort((x, y) => {
+      return x.geometry.attributes.position.count - y.geometry.attributes.position.count;
+    });
+    return children;
+  };
+
+  /**
+   * 设置模型透明
+   */
+  transparentModel = (model: THREE.Mesh) => {
+    const transparentMaterial = new THREE.MeshBasicMaterial({
+      transparent: true,
+      opacity: 0,
+    });
+    model.material = transparentMaterial;
+  };
+
+  addCssText = () => {
+    if (this.nitrogenNum > 0) {
+      for (let i = 0; i < this.nitrogenNum; i++) {
+        const nitrogenModal = this.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
+        if (!nitrogenModal.getObjectByName('monitorNitrogenText')) {
+          const element = document.getElementById('nitrogenMonitor' + (i + 1)) as HTMLElement;
+          element.style.top = '0px';
+          element.style.left = '0px';
+          const nitrogenMonitorCSS3D = new CSS3DSprite(element);
+          nitrogenMonitorCSS3D.name = 'monitorNitrogenText';
+          nitrogenMonitorCSS3D.scale.set(0.003, 0.003, 0.003);
+          if (i == 0) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0);
+          if (i == 1) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.04);
+          if (i == 2) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.08);
+          if (i == 3) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.12);
+          nitrogenModal.add(nitrogenMonitorCSS3D);
+        }
+        // if (!nitrogenModal.getObjectByName('cqgMonitorText')) {
+        //   const element = document.getElementById('cqgMonitor' + (i + 1)) as HTMLElement;
+        //   element.style.top = '0px';
+        //   element.style.left = '0px';
+        //   const cqgMonitorCSS3D = new CSS3DSprite(element);
+        //   cqgMonitorCSS3D.name = 'cqgMonitorText';
+        //   cqgMonitorCSS3D.scale.set(0.003, 0.003, 0.003);
+        //   if (i == 0) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.0);
+        //   if (i == 1) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.04);
+        //   if (i == 2) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.08);
+        //   if (i == 3) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.12);
+        //   nitrogenModal.add(cqgMonitorCSS3D);
+        // }
+      }
+    }
+  };
+
+  /**
+   * 处理杯子的纹理和杯子外层透明壳子
+   */
+  handleGlassAndWrap = (
+    objects: THREE.Object3D,
+    withVolume: THREE.Object3D[],
+    glassModel: THREE.Mesh,
+    params: THREE.MeshPhysicalMaterialParameters,
+    scale: number,
+    position: THREE.Vector3,
+    rotation?: THREE.Vector3
+  ) => {
+    //辨别杯子和壳 大的是杯子 小的是壳 壳的点比杯子少
+    const children = glassModel.children as THREE.Mesh[];
+    this.sortMeshChildren(children);
+
+    children.forEach((mesh) => {
+      mesh.position.copy(position);
+      mesh.scale.set(scale, scale, scale);
+      rotation && mesh.rotation.setFromVector3(rotation, 'XYZ');
+    });
+
+    const [transparentWrap, glass] = children;
+
+    this.transparentModel(transparentWrap);
+
+    glass.material = new THREE.MeshPhysicalMaterial({
+      side: THREE.DoubleSide,
+      // specularColor: new Color("#ffffff"),
+      // color: new Color(0xffa000),
+      ...params,
+    });
+
+    objects.add(...children);
+    //只检测壳子 减小开销
+    withVolume.push(transparentWrap);
+  };
+
+  mountedThree(nitrogenNum) {
+    this.nitrogenNum = nitrogenNum;
+    return new Promise((resolve) => {
+      if (nitrogenNum < 1) {
+        resolve(null);
+        return;
+      }
+      this.model.setModel([this.modelName]).then(async (gltf) => {
+        const nitrogenGroup = new THREE.Object3D();
+        for (let i = 0; i < nitrogenNum; i++) {
+          const nitrogenModal = gltf[0].clone();
+          nitrogenModal.name = 'nitrogenModal' + i;
+          nitrogenModal.position.set(0, 0, -1.29 * i);
+          nitrogenGroup.add(nitrogenModal);
+        }
+
+        this.group = nitrogenGroup;
+
+        this.group.name = this.modelName;
+        setModalCenter(this.group);
+        this.addCssText();
+        this.setModalPosition();
+        this.addLight();
+        resolve(null);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.group) {
+      this.model.clearGroup(this.group);
+    }
+    this.model = null;
+    this.group = null;
+  }
+}
+
+export default Nitrogen;

src/views/vent/monitorManager/compressor/nitrogen.threejs.ts

@@ -0,0 +1,110 @@
+import * as THREE from 'three';
+import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util';
+import UseThree from '../../../../utils/threejs/useThree';
+import Nitrogen from './nitrogen.dishang.threejs';
+import { useAppStore } from '/@/store/modules/app';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+// 模型对象、 文字对象
+let model, //
+  group,
+  nitrogenObj,
+  modalType = 'lmWindRect';
+
+const appStore = useAppStore();
+
+// 鼠标点击、松开事件
+const mouseEvent = (event) => {
+  event.stopPropagation();
+  const widthScale = appStore.getWidthScale;
+  const heightScale = appStore.getHeightScale;
+  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
+  model.mouse.x =
+    ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
+  model.mouse.y =
+    -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
+  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
+
+  // console.log('相机与控制器信息--->', model.camera, model.orbitControls);
+  // updateAxisCenter(model, event);
+
+  if (group) {
+    const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[];
+    if (intersects.length > 0) {
+      // 单道、 双道
+      if (modalType === 'nitrogen') {
+        nitrogenObj.mousedownModel.call(nitrogenObj, intersects);
+      }
+    }
+    console.log('99999------>', model.camera, model.orbitControls);
+  }
+};
+
+/* 添加监控数据 */
+export const addText = (selectData) => {
+  if (modalType === 'nitrogen') {
+    return nitrogenObj.addText.call(nitrogenObj, selectData);
+  }
+};
+
+export const play = () => {
+  if (modalType === 'nitrogen') {
+    return nitrogenObj.play.call(nitrogenObj);
+  }
+};
+
+// 切换风窗类型
+export const setModelType = (type) => {
+  modalType = type;
+  model.camera.position.set(-1000, 100, 500);
+
+  return new Promise((resolve) => {
+    // 显示双道风窗
+    if (modalType === 'nitrogen') {
+      group = nitrogenObj.group;
+      // setModalCenter(group);
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      const oldControlsPosition = { x: -10, y: 10, z: 10 };
+      model.scene.add(nitrogenObj.group);
+      setTimeout(async () => {
+        resolve(null);
+        await animateCamera(
+          oldCameraPosition,
+          oldControlsPosition,
+          // { x: -0.24658823766780538, y: 35.50352092191473, z: 83.90511756512278 },
+          // { x: -0.24658823766780538, y: 35.50352092191473, z: 83.90511756512278 },
+          // { x: 1.5582599568763913, y: -3.2828007511721147, z: 2.2606374587827234 },
+          { x: 0.2528210526315788, y: 38.731704155124646, z: 66.23189916897506 },
+          { x: 0, y: 0, z: 0 },
+          model,
+          0.8
+        );
+      }, 300);
+    }
+  });
+};
+
+export const mountedThree = (nitrogenNum) => {
+  return new Promise(async (resolve) => {
+    model = new UseThree('#nitrogen3D', '#nitrogenCss3D');
+    model.setEnvMap('test1');
+    model.renderer.toneMappingExposure = 0.8;
+    model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
+    nitrogenObj = new Nitrogen(model);
+    await nitrogenObj.mountedThree(nitrogenNum);
+    setModelType('nitrogen');
+    resolve(null);
+    model.animate();
+  });
+};
+
+export const destroy = () => {
+  if (model) {
+    nitrogenObj?.destroy();
+    model.deleteModal();
+    model = null;
+    group = null;
+  }
+};

src/views/vent/monitorManager/deviceMonitor/device.api.ts

@@ -3,7 +3,7 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   list = '/monitor/device',
   baseList = '/safety/ventanalyDeviceInfo/list',
-  deviceTypeList = '/sys/dict/DeviceKind/query',
+  deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/query',
 }
 /**
  * 列表接口

src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -1,22 +1,41 @@
 <template>
-  <div class="scene-box">
+  <div class="scene-box" v-if="routerParam !== 'home'">
+  <!-- <div class="scene-box"> -->
     <div class="device-header">智能通风管控系统</div>
-    <div class="device-select-box">
-      <a-tree
-        :show-line="true"
-        :tree-data="treeData"
-        @select="onSelect"
-      >
-      </a-tree>
+    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }">
+      <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" @click="showTree(true)" />
+      <span class="title">{{ treeNodeTitle }}</span>
+    </div>
+    <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
+      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree(false)" />
+      <div class="device-select-box">
+        <a-tree
+          :show-line="true"
+          :tree-data="treeData"
+          v-model:selectedKeys="selectedKeys"
+          v-model:expandedKeys="expandedKeys"
+          @select="onSelect"
+        >
+        </a-tree>
+      </div>  
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight" id="monitorBox">
+      <div class="to-small" @click="toHome"></div>
+      <div class="device-button-group" v-if="deviceList.length > 0">
+        <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}</div>
+        <div class="enter-detail" @click="goDetail()">
+          <send-outlined />
+          {{ treeNodeTitle }}详情
+        </div>
+      </div>
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" >
         <a-tab-pane key="1" tab="实时监测">
-          <template v-if="deviceType == 'fan'">
+          <template v-if="deviceType == 'fan' && activeKey == '1'">
             <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
           </template>
-          <template v-else>
+          <template v-else-if = "activeKey == '1'">
             <MonitorTable
+              ref="monitorTable"
               :columnsType="`${deviceType}_monitor`"
               :dataSource="dataSource"
               design-scope="device_monitor"
@@ -43,113 +62,180 @@
         </a-tab-pane>
         <a-tab-pane key="2" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable :columns-type="`${deviceType}_history`" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind : deviceType})" designScope="device-history" />
+            <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype : deviceType, sysId: systemID })" designScope="device-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm_history" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })" designScope="alarm-history" />
+            <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="操作历史">
           <div class="tab-item">
-            <HandlerHistoryTable columns-type="operatorhistory" :device-type="deviceType"  :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })" designScope="operator-history" />
-          </div>
+            <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID" columns-type="operatorhistory" :device-type="deviceType"  :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID  })" designScope="operator-history" />
+          </div> 
         </a-tab-pane>
       </a-tabs>
     </div>
-    <component :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
+    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
   </div>
 </template>
 <script setup lang="ts">
   import {ref, onMounted, onUnmounted, ComponentOptions, shallowRef } from 'vue'
+  import { SendOutlined } from '@ant-design/icons-vue';
   import { list, getDeviceList, getDeviceTypeList } from './device.api'
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-  import type { TreeProps } from 'ant-design-vue';
+  import { TreeProps, message } from 'ant-design-vue';
   import { TableAction } from '/@/components/Table';
   import FiberModal from './modal/fiber.modal.vue';
   import DustModal from './modal/dust.modal.vue'
+  import { SvgIcon } from '/@/components/Icon';
+  import { getActions } from '/@/qiankun/state';
+  import { useRouter } from 'vue-router';
+  
+
+  type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
+
+  const router = useRouter()
+
+  const actions = getActions();
+  actions.setGlobalState({ pageObj: { pageType: 'home' } });
 
+  const monitorTable = ref()
+  const historyTable = ref()
+  const alarmHistoryTable = ref()
+  const handlerHistoryTable = ref()
+
+  const routerParam = ref('home') // 默认进来时首页
   // 模态框
-  const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
-  const modalVisible = ref<Boolean>(false);
+  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
+  const modalVisible = ref<Boolean>(false); // 模态框是否可见
 
   //
-  const drawerHeight = ref(700) 
-  
-  const activeKey = ref('1');
-  const dataSource = shallowRef([])
-  const activeID = ref('')
-  const deviceType = ref('window')
+  const drawerHeight = ref(240) // 监测框最小高度
+  const treeShow = ref(true) //是否显示树形菜单
+  const treeNodeTitle = ref('') // 选中的树形标题
+
+  const deviceList = ref<DeviceType[]>([])
+  const deviceActive = ref('')
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]) // 实时监测数据
+  const activeID = ref('') // 打开详情modal时监测的设备id
+  const deviceType = ref('') // 监测设备类型
+  const systemType = ref('')
+  const systemID = ref('') // 系统监测时，系统id
+  const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>([]);
   const scroll = ref({
     y: drawerHeight.value - 100
   })
-
   const treeData = ref<TreeProps['treeData']>([]);
-  const onSelect: TreeProps['onSelect'] = (selectedKeys) => {
-    // console.log('selected', selectedKeys, info);
-    // info.node.title
-    deviceType.value = selectedKeys[0]
 
+  //树形菜单选择事件
+  const onSelect: TreeProps['onSelect'] = async(keys, e) => {
+    deviceType.value = ''
+    systemID.value = ''
+    deviceList.value = []
+    if(e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')){
+      systemType.value = e.node.parent.node.type
+      deviceType.value = e.node.parent.node.type
+      systemID.value = e.node.type
+      // 传递工作面id信息,用于定位
+      actions.setGlobalState({ locationObj: { pageType: deviceType.value ,deviceid: systemID.value }, pageObj: null });
+    }else{
+      systemType.value = e.node.type
+      deviceType.value = e.node.type
+    }
+    selectedKeys.values = keys
+    treeNodeTitle.value = e.node.title
+
+    if (timer) clearInterval(timer);
+    await getDataSource()
+    getMonitor() 
   };
   
   function tabChange(activeKeyVal) {
     activeKey.value = activeKeyVal;
   };
+
+  function showTree(flag) {
+    treeShow.value = flag
+  }
   
   async function getDeviceType () {
     const result = await getDeviceTypeList({})
     if (result.length > 0) {
       const dataSource = <TreeProps['treeData']>[]
-      const getData = (resultList, dataSourceList) => {
-        resultList.forEach((item) => {
-
+      let key = '0'
+      const getData = (resultList, dataSourceList, keyVal) => {
+        resultList.forEach((item, index) => {
           if (item.children && item.children.length > 0) {
-            const children = getData(item.children, [])
+            const children = getData(item.children, [], `${keyVal}-${index}`)
             dataSourceList.push({
               children: children,
               title: item.itemText,
-              key: item.itemValue,
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
             });
             
           } else {
             dataSourceList.push({
+              children: [],
               title: item.itemText,
-              key: item.itemValue,
-              children: []
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
             });
           }
         });
         return dataSourceList
       }
-      treeData.value = getData(result, dataSource)
+      console.log('树形菜单-------------->', treeData.value)
+      treeData.value = getData(result, dataSource, key)
+      
     }
   }
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor() {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-        debugger
+    timer = setInterval(async () => {
+      await getDataSource()
+    }, 1000);
+  };
+
+  async function getDataSource() {
+    if (deviceType.value.startsWith('sys') && systemID.value) {
+      const res = await list({ devicetype: 'sys', systemID: systemID.value });
+      const result = res.msgTxt;
+      const deviceArr = <DeviceType[]>[]
+      result.forEach(item => {
+        const data = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        })
+        if (item.type != 'sys') {
+          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
+        }
+      })
+      console.log('关联设备列表', deviceArr)
+      deviceList.value = deviceArr
+      deviceActive.value = deviceArr[1].deviceType
+      monitorChange(1)
+    } else {
+      const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
+      if (res.msgTxt[0]) {
         dataSource.value = res.msgTxt[0].datalist || [];
         dataSource.value.filter((data: any) => {
           const readData = data.readData;
           return Object.assign(data, readData);
         });
-
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, 1000);
+      }
     }
-  };
+  }
 
   function setDivHeight(e: MouseEvent) {
     const divObject = document.getElementById('monitorBox') as HTMLElement
@@ -160,10 +246,10 @@
       res.preventDefault()
       const distY = Math.abs(res.clientY - startY)
       if(res.clientY > startY){
-        if(divHeight - distY >= 300){
+        if(divHeight - distY >= 240){
           drawerHeight.value = divHeight - distY
         }else{
-          drawerHeight.value = 300
+          drawerHeight.value = 240
         }
       }
       if(res.clientY < startY){
@@ -182,31 +268,126 @@
       }
     }
   }
-
-  function goLocation() {
-
+  // 定位
+  function goLocation(record) {
+    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
   }
-  function goDetail(record){
-    if(deviceType.value.startsWith('fiber')){
-      activeID.value = record.deviceID
-      currentModal.value = FiberModal
-      modalVisible.value = true;
+  // 详情
+  function goDetail(record?){
+
+    if(record){
+      if (deviceType.value.startsWith('fiber')) {
+        activeID.value = record.deviceID
+        currentModal.value = FiberModal
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('dusting')) {
+        activeID.value = record.deviceID
+        currentModal.value = DustModal
+        modalVisible.value = true;
+      } else if (deviceType.value.indexOf("gate") != -1) {
+        const newPage = router.resolve({path: '/monitorChannel/monitor-gate'})
+        window.open(newPage.href, '_blank')
+      } else if (deviceType.value.indexOf("window") != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-window' })
+        window.open(newPage.href, '_blank')
+      } else if (deviceType.value.indexOf("windrect") != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect' })
+        window.open(newPage.href, '_blank')
+      } else if (deviceType.value.indexOf("fanmain") != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-main' })
+        window.open(newPage.href, '_blank')
+      } else if (deviceType.value.indexOf("fanlocal") != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-local' })
+        window.open(newPage.href, '_blank')
+      } else {
+        message.info('待开发。。。')
+      }
+    }else{
+      if (systemType.value.indexOf("sys_dongshi") != -1) {
+        const newPage = router.resolve({ path: '/chamber-home', query: {id: systemID.value }})
+        window.open(newPage.href, '_blank')
+      }else{
+        message.info('待开发。。。')
+      }
     }
-    if (deviceType.value.startsWith('dusting')) {
-      activeID.value = record.deviceID
-      currentModal.value = DustModal
-      modalVisible.value = true;
+    
+  }
+  
+  function toHome() {
+    deviceList.value = []
+    actions.setGlobalState({ pageObj: { pageType: 'home'} });
+  }
+  // 遍历树形菜单
+  async function findTreeDataValue(data:[], obj) {
+    const findDeviceType = (data: [], obj) => {
+      let type = ''
+      if (obj.deviceid) {
+        type = obj.deviceid
+      } else {
+        type = obj.deviceType
+      }
+      data.find((item: any) => {
+        if (item.children.length > 0) {
+          findDeviceType(item.children, obj)
+        }
+        if (item.type == type) {
+          deviceType.value = obj.deviceid ? 'sys' : item.type
+          if (obj.deviceid) systemID.value = obj.deviceid
+          selectedKeys.value = [item.key]
+          expandedKeys.value = [item.key]
+          treeNodeTitle.value = item.title
+        }
+      })
     }
+    findDeviceType(data, obj)
+    if (timer) clearInterval(timer);
+    await getDataSource()
+    getMonitor()
   }
 
+  function monitorChange(index) {
+    dataSource.value = []
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType
+
+    if (activeKey.value == '1' && monitorTable.value) {
+      monitorTable.value.setLoading(true)
+      dataSource.value = deviceList.value[index].datalist
+    }
+    if(activeKey.value == '2' && historyTable.value){
+      historyTable.value.setLoading(true)
+    }
+    if (activeKey.value == '3' && alarmHistoryTable.value) {
+      alarmHistoryTable.value.setLoading(true)
+    }
+    if (activeKey.value == '4' && handlerHistoryTable.value) {
+      handlerHistoryTable.value.setLoading(true)
+    }
+  }
+  
   onMounted(async() => {
+    actions.onGlobalStateChange(async(newState, prev) => {
+      for (const key in newState) {
+        if (key === 'pageObj') {
+          const pageObj = newState[key]
+          if (pageObj) {
+            routerParam.value = pageObj.pageType
+            if (pageObj.deviceid) {
+              await findTreeDataValue(treeData.value, { deviceid: pageObj.deviceid })
+            } else {
+              await findTreeDataValue(treeData.value, { deviceType: pageObj.pageType })
+            }
+          }
+        }
+      }
+    })
     await getDeviceType()
-    getMonitor()
+    // await getDataSource()
+    // getMonitor()
   })
+  
   onUnmounted(() => {
     if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
+      clearInterval(timer);
     }
   })
 
@@ -226,15 +407,81 @@
     font-weight: 600;
     z-index: -1;
   }
-  .device-select-box{
+  .select-node{
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    font-size: 24px;
+    .title{
+      margin-left: 10px;
+    }
+  }
+  .device-select{
     width: 250px;
     height: 500px;
+    background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
     position: fixed;
-    top: 55px;
-    left: 0;
-    color: #fff;
+    top: 60px;
+    left: 10px;
+    background-size: contain;
     pointer-events: auto;
-    overflow-y: auto;
+    padding: 20px 10px 30px 10px;
+    .expansion-icon{
+      position: absolute;
+      left: 190px;
+      top: 25px;
+    }
+  }
+  .is-expansion-icon{
+    background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
+    background-size: contain;
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
+    &:hover{
+      background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+      background-size: contain;
+    }
+  }
+  .put-away-icon{
+    display: inline-block;
+  }
+  .device-select-show{
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  }
+  .device-select-hide{
+    left: -250px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  }
+  .node-select-show{
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  }
+  .node-select-hide{
+    left: -400px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  }
+  .device-select-box{
+    width: 208px;
+    height: 450px;
+    overflow-y: auto;    
+    color: #fff;    
     :deep(.zxm-tree){
       background: transparent !important;
       color: #fff !important;
@@ -245,7 +492,7 @@
         background-color: #00b1c8;
       }
       .zxm-tree-node-content-wrapper:hover{
-        background-color: #00b1c8;
+        background-color: #00b1c855;
       }
       input{
         height: 0px !important;
@@ -255,12 +502,148 @@
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
       border-radius: 10px;
       background: #ededed22;
+      height: 100px;
     }
     &::-webkit-scrollbar-thumb {
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
       background: #4288A444;
     }
   }
+  .bottom-tabs-box{
+    
+    position: relative;
+    .to-small{
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+      background-size: auto;
+      position: absolute;
+      top: -65px;
+      right: 30px;
+      border-radius: 10px;
+      padding: 8px;
+      backdrop-filter: blur(10px);
+      background-color: rgba(0, 58, 128, 0.418);
+      &:hover{
+        background-color: rgba(42, 85, 138, 0.418);
+      }
+    }
+    .device-button-group{
+      position: absolute;
+      top: -30px;
+      left: 30px;
+      display: flex;
+      width: 100%;
+      
+      .device-button{
+        padding: 4px 15px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        
+        color: #fff;
+        cursor: pointer;
+        margin: 0 3px;
+
+        &::before{
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 1px solid #6176AF;
+          transform: skewX(-38deg);
+          background-color: rgba(0, 77, 103,85%);
+          z-index: -1;
+        }
+      }
+      .device-active{
+        // color: #0efcff;
+        &::before{
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
+    }
+    .enter-detail{
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 150px;
+      top: -10px;
+      padding: 5px;
+      // border: 1px transparent solid;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      // height: 40px;
+      // border: 1px solid #65dbea;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
+      &::before {
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit; /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
+      }
+      &::after {
+        width: calc(100% + 32px);
+        height: 10px;
+        content: '';
+        position: absolute;
+        top: 35px;
+        right: 0;
+        left: -16px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit; /*important*/
+        background: url('/@/assets/images/vent/short-light.png') no-repeat;
+        background-position: center;
+        background-size: 100%;
+        z-index: 999;
+      }
+    }
+  }
+  @keyframes treeShow {
+    0% {
+      left: -400px;
+      opacity: 0;
+    }
+    100% {
+      left: 10px;
+      opacity: 1;
+    }
+  }
+  @keyframes treeHide {
+    0% {
+      left: 10px;
+      opacity: 1;
+    }
+    100% {
+      left: -400px;
+      opacity: 0;
+    }
+  }
+  
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     overflow: auto;
     // height: 100%;

src/views/vent/monitorManager/deviceMonitor/modal/dust.modal.vue

@@ -10,67 +10,78 @@
         <div class="right-top">
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature.svg" />
+              <SvgIcon class="icon-style max-temperature" size="30" name="hd-wd" />
             </div>
             <div class="item-container">
               <div class="title">巷道温度</div>
-              <div class="value">{{ dustMonitor.temperature }} <span>℃</span> </div>
+              <div class="value"><span class="data">{{ dustMonitor.temperature }}</span> <span>℃</span> </div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
+              <SvgIcon class="icon-style min-temperature" size="30" name="dust-nd" />
             </div>
             <div class="item-container">
               <div class="title">粉尘浓度</div>
-              <div class="value">{{ dustMonitor.humidity }} <span>mg/m³</span></div>
+              <div class="value"><span class="data">{{ dustMonitor.humidity }}</span> <span>mg/m³</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
+              <SvgIcon class="icon-style aveg-temperature" size="30" name="pw-sy" />
             </div>
             <div class="item-container">
               <div class="title">喷雾水压</div>
-              <div class="value">{{ dustMonitor.waterPressure }} <span>MPa</span></div>
+              <div class="value"><span class="data">{{ dustMonitor.waterPressure }}</span> <span>MPa</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="38" name="risk-level" />
+              <SvgIcon class="icon-style" size="30" name="pw-zz" />
             </div>
             <div class="item-container">
               <div class="title">喷雾装置</div>
               <div class="warning-value">低风险</div>
             </div>
           </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="40" name="kg" />
+            </div>
+            <div class="item-container">
+              <div class="title">喷雾开关</div>
+              <div class="warning-value">
+                <a-switch checked-children="开" un-checked-children="关" v-model:checked="dustSwitch" />
+              </div>
+            </div>
+          </div>
         </div>
         <div class="right-center">
           <span class="base-title">粉尘实时监测</span>
           <div class="dust-group">
             <div class="dust-item">
-              <div>粉尘浓度(实时)</div>
-              <div>{{ dustMonitor.breathWeighted }}</div>
+              <div class="title">粉尘浓度(实时)</div>
+              <div class="value">{{ dustMonitor.breathWeighted }}<span>mg/m³</span></div>
             </div>
             <div class="dust-item">
-              <div>总尘浓度(时间加权)</div>
-              <div>{{ dustMonitor.totalDust }}</div>
+              <div class="title">总尘浓度(时间加权)</div>
+              <div class="value">{{ dustMonitor.totalDust }}<span>mg/m³</span></div>
             </div>
             <div class="dust-item">
-              <div>呼吸加权容许浓度</div>
-              <div>{{ dustMonitor.breathWeighted }}</div>
+              <div class="title">呼吸加权容许浓度</div>
+              <div class="value">{{ dustMonitor.breathWeighted }}<span>mg/m³</span></div>
             </div>
             <div class="dust-item">
-              <div>爆炸浓度(煤尘)</div>
-              <div>{{ dustMonitor.dustval }}</div>
+              <div class="title">爆炸浓度(煤尘)</div>
+              <div class="value">{{ dustMonitor.dustval }}<span>mg/m³</span></div>
             </div>
           </div> 
         </div>
         <div class="right-bottom">
-          <span class="base-title">测点监测曲线</span>
+          <span class="base-title">粉尘预测曲线</span>
           <div class="echarts-box">
             <BarAndLine
-              xAxisPropType="pos"
+              xAxisPropType="readTime"
               :dataSource="posList"
               height="100%"
               :chartsColumns="chartsColumns"
@@ -104,6 +115,7 @@ export default defineComponent({
     const deviceList = ref<any[]>([])
     const posList = ref<any[]>([])
     const dustMonitor = shallowRef({})
+    const dustSwitch = ref(false)
 
     const echatsOption = {
       grid: {
@@ -120,16 +132,40 @@ export default defineComponent({
 
     const chartsColumns = [
       {
-        legend: '测点温度',
-        seriesName: '(℃)',
-        ymax: 200,
-        yname: '℃',
+        legend: '粉尘平均浓度',
+        seriesName: '(mg/m³)',
+        ymax: 5,
+        yname: 'mg/m³',
         linetype: 'line',
         yaxispos: 'left',
         color: '#FDB146',
         sort: 1,
         xRotate: 0,
-        dataIndex: 'value',
+        dataIndex: 'hourAvg',
+      },
+      {
+        legend: '粉尘最大浓度',
+        seriesName: '(mg/m³)',
+        ymax: 5,
+        yname: 'mg/m³',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#EE6666',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'hourMax',
+      },
+      {
+        legend: '粉尘最小浓度',
+        seriesName: '(mg/m³)',
+        ymax: 5,
+        yname: 'mg/m³',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#9BCB75',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'hourMin',
       },
     ]
 
@@ -217,14 +253,19 @@ export default defineComponent({
       newDataSource?.forEach((item:any, index) => {
         if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
           activeDeviceID.value = item.deviceID
-          // const list = JSON.parse(item.readData.fibreTemperature)
-          // if(list.length > 0) posList.value = list
+          const list = item.summaryHour
+          list.filter(data => {
+            const date = new Date();     //1. js获取当前时间
+            const min = date.getMinutes();  //2. 获取当前分钟
+            return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
+          })
+          if(list.length > 0) posList.value = list
           dustMonitor.value = item.readData
         }
       })
     })
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, deviceList, activeDeviceID, dustMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
+    return { register, model: modelRef, currentTime, dustSwitch, handleVisibleChange, selectDevice, deviceList, activeDeviceID, dustMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
   },
   
 });
@@ -232,7 +273,7 @@ export default defineComponent({
 <style lang="less" scoped>
   .fiber-modal{
     width: 100%;
-    height: 650px;
+    height: 600px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -290,51 +331,57 @@ export default defineComponent({
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        margin-bottom: 10px;
+        margin-bottom: 30px;
+        padding: 0 10px;
         .top-item{
-          width: 200px;
-          height: 80px;
+          width: 155px;
+          height: 60px;
           display: flex;
           flex-direction: row;
           justify-content: center;
-          border: 1px solid rgba(25,237,255,.4);
-          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-          background: rgba(0,0,0,.06666666666666667);
+          align-items: center;
+          background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
           padding-top: 16px;
           .icon{
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #FDB146;
+            width: 58px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -8px;
           }
           .item-container{
             width: 100px;
             display: flex;
             flex-direction: column;
-            justify-content: center;
+            // justify-content: start;
             div{
-              text-align: center;
+              padding-left: 8px;
             }
             .title{
-              font-size: 18px;
+              font-size: 14px;
+              margin-bottom: 8px;
             }
             .value{
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
               position: relative;
+              width: 110px;
               top: -8px;
+              .data{
+                display: inline-block;
+                width: 50px;
+                font-family: douyuFont;
+                font-weight: 600;
+                font-size: 14px;
+                -webkit-background-clip: text;
+                background-clip: text;
+                color: #28DCE4;
+              }
               span{
                 font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
+                font-size: 14px;
+                color: #ffffffdd;
               }
-              
             }
             
           }
@@ -347,7 +394,11 @@ export default defineComponent({
               color: #FDB146;
             }
           }
+          .title{
+            padding-top: 0px;
+          }
           .warning-value{
+            font-family: electronicFont;
             font-size: 18px;
             color: #61ddb1;
           }
@@ -362,7 +413,30 @@ export default defineComponent({
           .dust-item{
             width: 238px;
             height: 148px;
-            background: url('/@/assets/images/vent/model_image/dust-bg.png');
+            background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
+            scale: 0.9;
+            .title{
+              position: absolute;
+              top: 80px;
+              left: 70px;
+              font-size: 16px;
+            }
+            .value{
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              font-family: 'douyuFont';
+              color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 18px;
+              font-weight: bolder;
+              span{
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+                color: aliceblue;
+                margin-left: 8px;
+              }
+            }
           }
         }
       }
@@ -370,7 +444,7 @@ export default defineComponent({
         margin-top: 20px;
         .echarts-box{
           width: 100%;
-          height: 230px;
+          height: 270px;
         }
       }
 

src/views/vent/monitorManager/deviceMonitor/modal/fiber.modal.vue

@@ -10,7 +10,7 @@
         <div class="right-top">
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature.svg" />
+              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
             </div>
             <div class="item-container">
               <div class="title">最高温度</div>
@@ -227,8 +227,10 @@ export default defineComponent({
       newDataSource?.forEach((item:any, index) => {
         if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
           activeDeviceID.value = item.deviceID
-          const list = JSON.parse(item.readData.fibreTemperature)
-          if(list.length > 0) posList.value = list
+          if(item.readData.fibreTemperature){
+            const list = JSON.parse(item.readData.fibreTemperature)
+            if (list.length > 0) posList.value = list
+          }
           posMonitor.value = item.readData
         }
       })

src/views/vent/monitorManager/fanLocalMonitor/index.vue

@@ -91,12 +91,12 @@
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="fanlocal_history" device-type="fanlocal" :device-list-api="baseList" designScope="fanlocal-history" />
+            <HistoryTable columns-type="fanlocal" device-type="fanlocal" :device-list-api="baseList" designScope="fanlocal-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm_history" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
+            <AlarmHistoryTable columns-type="alarm" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">

src/views/vent/monitorManager/fiberMonitor/fiber.ds.threejs.ts

@@ -5,9 +5,9 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
 import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import * as dat from 'dat.gui';
-const gui = new dat.GUI();
-gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
 class GrottoFiber {
   model;

src/views/vent/monitorManager/fiberMonitor/index.vue

@@ -69,13 +69,13 @@
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="fibre_history" device-type="fiber" :device-list-api="baseList"
+            <HistoryTable columns-type="fibre" device-type="fiber" :device-list-api="baseList"
               designScope="fiber-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm_history" device-type="fiber" :device-list-api="baseList"
+            <AlarmHistoryTable columns-type="alarm" device-type="fiber" :device-list-api="baseList"
               designScope="alarm-history" />
           </div>
         </a-tab-pane>

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -126,12 +126,12 @@
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="gate_history" device-type="gate" :device-list-api="getTableList" designScope="gate-history" />
+            <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList" designScope="gate-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm_history" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" />
+            <AlarmHistoryTable columns-type="alarm" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">

src/views/vent/monitorManager/groutMonitor/components/groutAlarmHistory.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="alarm-history">
+    <AlarmHistoryTable columns-type="alarm" device-type="pressurefan"
+      :device-list-api="getTableList.bind(null, { strtype: 'pressurefan' })" designScope="alarm-history" />
+  </div>
+</template>
+<script setup lang="ts">
+import AlarmHistoryTable from '../../comment/AlarmHistoryTable.vue';
+import { getTableList } from '../grout.api'
+const props = defineProps({
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceId: {
+    type: String,
+    required: true,
+  }
+})
+</script>
+<style lang="less" scoped>
+.alarm-history {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/groutMonitor/components/groutHandleHistory.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="handle-history">
+    <HandlerHistoryTable columns-type="operatorhistory" device-type="pressurefan"
+      :device-list-api="getTableList.bind(null, { strtype: 'pressurefan' })" designScope="pressurefan_history" />
+  </div>
+</template>
+<script setup lang="ts">
+import HandlerHistoryTable from '../../comment/HandlerHistoryTable.vue';
+import { getTableList } from '../grout.api'
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    }
+  })
+</script>
+<style lang="less" scoped>
+.handle-history {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/groutMonitor/components/groutHistory.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="history-box">
+    <HistoryTable :columns-type="`${deviceType}`" :device-type="deviceType" :sysId="deviceId"
+      :device-list-api="getTableList.bind(null, { strtype: deviceType, sysId: deviceId })" designScope="pressurefan_history" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import HistoryTable from '../../comment/HistoryTable.vue';
+import { getTableList } from '../grout.api'
+
+const props = defineProps({
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceId: {
+    type: String,
+    required: true,
+  }
+})
+
+</script>
+<style lang="less" scoped>
+.history-box {
+  pointer-events: auto;
+}
+</style>

src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

@@ -0,0 +1,447 @@
+<template>
+  <div class="monitor-container">
+    <div class="lr left-box">
+      <div class="monitor-info item-box">
+        <ventBox1>
+          <template #title>
+            <div>设备信息监测</div>
+          </template>
+          <template #container v-if="dataSource.length > 0 ">
+            <div v-for="(monitor, key) in deviceMonitorData" :key="key" class="monitor-item">
+              <div class="item-title">{{ monitor.text }}</div>
+              <div class="item-val">{{ key.startsWith('1#') ? dataSource[0][key.split('_')[1]]||'-' : key.startsWith('2#') ? dataSource[1][key.split('_')[1]]||'-' : (dataSource[0][key] || '-') }}</div>
+              <div class="item-unit">{{ monitor.unit }}</div>
+            </div>
+          </template>
+        </ventBox1>
+      </div>
+      <div class="warning-group">
+        <ventBox1>
+          <template #title>
+            <div>近一月报警情况</div>
+          </template>
+          <template #container>
+           <dv-scroll-board ref="scrollBoard" :config="warningConfig"
+              style="width: 100%; height: 240px; overflow-y: auto; " />
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+    <div class="lr right-box">
+      <div class="control-container item-box">
+        <ventBox1>
+          <template #title>
+            <div>设备设施集中控制</div>
+          </template>
+          <template #container >
+            <div class="control-group">
+              <div class="control-item" v-for="(item, key) in deviceControlData" :key="key">
+                <div class="control-item-title">{{ item }}</div>
+                <div class="control-item-state" v-if="!key.startsWith('2#')">
+                  <a-switch v-model="dataSource[0][key.split('_')[1]]" size="small"  checked-children="开启"
+                    un-checked-children="关闭"
+                    @change="handlerDevice(dataSource[0][key.split('_')[1]])">
+                  </a-switch>
+                </div>
+                <div class="control-item-state" v-else>
+                  <a-switch v-model="dataSource[1][key.split('_')[1]]" size="small"  checked-children="开启"
+                    un-checked-children="关闭"
+                    @change="handlerDevice(dataSource[1][key.split('_')[1]])">
+                  </a-switch>
+                </div>
+              </div>
+            </div>
+            <a-divider style="height: 1px; background-color: #d7d7d755" />
+            <div class="control-btn-group">
+              <div class="control-left-box">
+                <div class="btn-box">
+                  <span @click="handlerDevice({ remote : true})">远程</span>
+                  <span @click="handlerDevice({ remote: false })">就地</span>
+                </div>
+                <div class="icon-box" :class="{'remote-icon-box': true}">
+                  <div class="icon"></div>
+                </div>
+              </div>
+              <div class="control-right-box">
+                <a-button class="btn" type="primary" @click="handlerDevice({run: true})">一键启动</a-button>
+                <a-button type="primary" danger @click="handlerDevice({ run: false })">紧急停止</a-button>
+              </div>
+            </div>
+            <a-divider style="height: 1px; background-color: #d7d7d755" />
+            <div class="parameter-btn-group"> 
+              <a-button type="primary"  @click="openModal('RunParameterModal')">参数设置</a-button>
+              <a-button type="primary"  @click="openModal('WarningParameterModal')">报警设置</a-button>
+            </div>
+          </template>
+        </ventBox1>
+      </div>
+      <div class="item-box" >
+        <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+      </div>
+    </div>
+  </div>
+  <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
+</template>
+
+<script setup lang="ts">
+
+import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, defineProps, ComponentOptions } from 'vue';
+import { mountedThree, destroy, setModelType } from '../grout.threejs';
+import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+import { SvgIcon } from '/@/components/Icon';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import RunParameterModal from './runParameter.modal.vue'
+import WarningParameterModal from './warningParameter.modal.vue'
+import { warningConfig} from '../grout.data'
+import { list } from '../grout.api';
+import LivePlayer from '@liveqing/liveplayer-v3';
+
+
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true
+  }
+})
+
+const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
+const modalVisible = ref<Boolean>(false); // 模态框是否可见
+const loading = ref(false);
+
+// 默认初始是第一行
+const dataSource = ref([
+  { 
+    waterSupply : '-',
+    beltVla: '-',
+    density: '-',
+    pressure: '-',
+    liquidLevel: '-',
+    flowRate: '-'
+  },
+  {
+    waterSupply: '-',
+    beltVla: '-',
+    density: '-',
+    pressure: '-',
+    liquidLevel: '-',
+    flowRate: '-'
+  }
+]); //dusting
+const deviceMonitorData = {
+  '1#_waterSupply': { text: '1#制浆机供水流量', unit: 'm³/h' },
+  '1#_beltVla': { text: '1#皮带秤数值', unit: 'T' },
+  '2#_waterSupply': { text: '2#制浆机供水流量', unit: 'm³/h' },
+  '2#_beltVla': { text: '2#皮带秤数值', unit: 'T' },
+  density: {text: '密度' , unit: 'g/cm'},
+  pressure: { text: '压力', unit: 'MPa' },
+  liquidLevel: { text: '缓冲池液位', unit: 'm' },
+  flowRate: { text: '注浆流量', unit: 'm³/h' },
+}
+const deviceControlData = {
+  '1#_waterPump': '1#清水泵',
+  '1#_groutingPump': '1#注浆泵',
+  '1#_pulpingMachine': '1#制浆机',
+  '2#_waterPump': '2#清水泵',
+  '2#_groutingPump': '2#注浆泵',
+  '2#_pulpingMachine': '2#制浆机',
+  'liquidLevelProtect ':'液位保护'
+}
+
+
+const flvURL1 = () => {
+  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+  // return ''
+};
+const openModal = (modalName) => {
+  modalVisible.value = true
+  if(modalName == 'RunParameterModal'){
+    currentModal.value = RunParameterModal
+  }else{
+    currentModal.value = WarningParameterModal
+  }
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(async () => {
+      await getDataSource()
+      if (timer) {
+        timer = null;
+      }
+      await getMonitor();
+    }, 1000);
+  }
+};
+
+async function getDataSource() {
+  const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
+  const dataList = res.msgTxt[0].datalist || [];
+  dataSource.value = dataList.filter((data) => {
+    const item = data.readData;
+    Object.assign(data, item);
+    return item
+  });
+}
+
+function handlerDevice(param: string | Object) {
+
+}
+function controlDevice(flag){
+
+}
+
+onBeforeMount(() => {
+
+});
+
+onMounted(() => {
+  loading.value = true;
+  mountedThree().then(async () => {
+    await setModelType('groutBase');
+    loading.value = false;
+    timer = null
+    await getMonitor()
+  });
+});
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+
+.monitor-container {
+  width: 100%;
+  height: 100%;
+  // height: 550px;
+  // border: 1px solid #fff;
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 5px;
+  
+  .lr {
+    width: 350px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    pointer-events: auto;
+  }
+
+  .right-box {
+    width: 320px;
+    .control-group{
+      display: flex;
+      // justify-content: space-around;
+      flex-wrap: wrap;
+      .control-item {
+        
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 2px;
+        .control-item-title{
+          color: #A6DCE9;
+          position: relative;
+          top: 5px;
+        }
+        .control-item-state{
+          width: 94px;
+          height: 47px;
+          background: url('/@/assets/images/vent/control-switch-bg.png');
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+        }
+      
+        .button-box {
+          position: relative;
+          padding: 5px;
+          border: 1px transparent solid;
+          background-clip: border-box;
+          border-radius: 5px;
+          margin-left: 8px;
+        }
+
+        .a-button {
+          pointer-events: auto;
+        }
+
+        &::v-deep .a-button--mini {
+          padding: 6px 10px;
+        }
+
+        &::v-deep .a-button--mini.is-round {
+          padding: 6px 10px;
+        }
+      }
+
+    }
+    .control-btn-group{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .control-left-box{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+        .btn-box{
+          width: 100px;
+          color: #fff;
+          display: flex;
+          justify-content: space-between;
+          span{
+            display: inline-block;
+            padding: 2px 8px;
+            background: #007099;
+            border-radius: 4px;
+            border: 1px solid rgb(125, 230, 249);
+            cursor: pointer;
+            &:hover{
+              background: #005574;
+            }
+          }
+        }
+        .icon-box{
+          width: 60px;
+          height: 60px;
+          border-radius: 30px;
+          border: 2px solid #00bcdd;
+          box-shadow: 0 0 20px #ffffff88;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 20px;
+             
+          .icon{
+            width: 18px;
+            height: 18px;
+            border-radius: 9px;
+            border: 3px solid #d7f9ff;
+            position: relative;
+            background: #00bcdd;
+            &::before{
+              position: absolute;
+              content: '';
+              width: 2px;
+              height: 12px;
+              background-color: #00bcdd;
+              left: 6px;
+              top: -16px;
+            }
+            &::after{
+              position: absolute;
+              content: '';
+              width: 2px;
+              height: 12px;
+              left: 6px;
+              top: 17px;
+              background-color: #00d9ff;
+            }
+          }
+        }
+        .remote-icon-box{
+          transform: rotate(30deg);
+          animation: iconRotate 1s linear infinite;
+        }
+        .remote-icon-box1{
+          transform: rotate(-30deg);
+          animation: iconRotate1 1s linear infinite;
+        }
+
+        @keyframes iconRotate{
+          from{
+            transform: rotate(-30deg);
+          }
+          to {
+            transform: rotate(30deg);
+          }
+        }
+        @keyframes iconRotate1{
+          from {
+            transform: rotate(30deg);
+          }
+          to {
+            transform: rotate(-30deg);
+          }
+        }
+        
+      }
+      .control-right-box{
+        width: 100px;
+        .btn{
+          margin-bottom: 30px;
+        }
+      }
+    }
+    .parameter-btn-group{
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .left-box {
+    margin-top: 30px;
+    .monitor-item{
+      display: flex;
+      color: #fff;
+      justify-content: space-between;
+      background-image: linear-gradient(to left, #3df6ff10, #3df6ff00);
+      margin: 10px 0;
+    
+      .item-title{
+        width: 200px;
+        margin-left: 10px;
+      }
+      .item-val{
+        width: 80px;
+        color: #00eefffe;
+      }
+      .item-unit{
+        width: 80px;
+      }
+    }
+    
+  }
+
+  .item-box{
+    margin-bottom: 15px;
+  }
+
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
+
+.input-box {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+
+  .input-title {
+    color: #73e8fe;
+    width: auto;
+  }
+
+  .@{ventSpace}-input-number {
+    border-color: #ffffff88 !important;
+  }
+
+  margin-right: 10px;
+}
+</style>

src/views/vent/monitorManager/groutMonitor/components/runParameter.modal.vue

@@ -0,0 +1,40 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" title="黄泥灌浆系统运行参数设置" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+    <div>123</div>
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent} from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { SvgIcon } from '/@/components/Icon';
+import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+
+export default defineComponent({
+  name: 'RunParameterModal',
+  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+
+  setup(props) {
+    
+    const [register, { closeModal }] = useModalInner();
+
+    function handleOk(e) {
+      e.preventDefault()
+      closeModal()
+    }
+
+    function handleCancel(e) {
+      e.preventDefault()
+      closeModal()
+    }
+
+    
+
+    return { register, handleOk, handleCancel, };
+  },
+  
+});
+</script>
+<style lang="less" scoped>
+  
+</style>

src/views/vent/monitorManager/groutMonitor/components/warningParameter.modal.vue

@@ -0,0 +1,40 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" title="黄泥灌浆系统报警参数设置" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+    <div>123</div>
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent} from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { SvgIcon } from '/@/components/Icon';
+import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+
+export default defineComponent({
+  name: 'WarningParameterModal',
+  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+
+  setup(props) {
+    
+    const [register, { closeModal }] = useModalInner();
+
+    function handleOk(e) {
+      e.preventDefault()
+      closeModal()
+    }
+
+    function handleCancel(e) {
+      e.preventDefault()
+      closeModal()
+    }
+
+    
+
+    return { register, handleOk, handleCancel, };
+  },
+  
+});
+</script>
+<style lang="less" scoped>
+  
+</style>

src/views/vent/monitorManager/groutMonitor/grout.api.ts

@@ -0,0 +1,18 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/monitor/device',
+  baseList = '/safety/ventanalyDeviceInfo/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -0,0 +1,63 @@
+import { reactive } from 'vue';
+import { BasicColumn } from '/@/components/Table';
+
+export const warningConfig = reactive({
+  header: ['设备名称', '预警信息', '时间'],
+  data: [
+    ['火焰6', '严重报警', '03-05'],
+    ['测点43', '一般预警', '03-05'],
+    ['CO23', '一版预警', '03-05'],
+    ['测点6', '超高预警', '03-05'],
+    ['测点65', '超高预警', '03-05'],
+    ['温度4', '一般预警', '03-05'],
+    ['测点61', '一般预警', '03-05'],
+    ['测点87', '一般信息', '03-05'],
+  ],
+  index: false,
+  // columnWidth: [150, 80, 150, 150],
+  headerBGC: '#3d9dd45d',
+  oddRowBGC: '#009acd10',
+  evenRowBGC: '#009acd05',
+  align: ['center', 'center', 'center'],
+});
+
+export const sensorColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '实时值',
+    dataIndex: 'smokeval',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '报警',
+    dataIndex: 'warnFlag',
+    width: 100,
+    align: 'center',
+  },
+];
+export const dustColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'netStatus',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/monitorManager/groutMonitor/grout.threejs.base.ts

@@ -0,0 +1,67 @@
+import * as THREE from 'three';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class ChamberBase {
+  model;
+  modelName = 'grout';
+  group: THREE.Object3D | null = null;
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+    directionalLight.position.set(-0.88, 10, 42.4);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    // gui.add(directionalLight.position, 'x', -500, 500);
+    // gui.add(directionalLight.position, 'y', -500, 500);
+    // gui.add(directionalLight.position, 'z', -500, 500);
+
+    const spotLight = new THREE.SpotLight();
+    spotLight.angle = Math.PI / 2;
+    spotLight.penumbra = 0;
+    spotLight.castShadow = true;
+    spotLight.intensity = 1;
+
+    spotLight.shadow.camera.near = 0.5; // default
+    spotLight.shadow.focus = 1.2;
+    spotLight.shadow.bias = -0.000002;
+
+    spotLight.position.set(89.8, 144, 314);
+    this.group?.add(spotLight);
+
+    // gui.add(spotLight.position, 'x', -600, 600);
+    // gui.add(spotLight.position, 'y', -600, 800);
+    // gui.add(spotLight.position, 'z', -500, 1000);
+  }
+
+  addChamberText(selectData) {
+    //
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setModel([this.modelName]).then((gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          this.group?.scale.set(12.5, 12.5, 12.5);
+          this.group.position.y = 4;
+          resolve(null);
+          this.addLight();
+        }
+      });
+    });
+  }
+
+  destroy() {
+    this.model.clearGroup(this.group);
+    this.model = null;
+    this.group = null;
+  }
+}
+export default ChamberBase;

src/views/vent/monitorManager/groutMonitor/grout.threejs.ts

@@ -0,0 +1,116 @@
+import * as THREE from 'three';
+import UseThree from '../../../../utils/threejs/useThree';
+import ChamberBase from './grout.threejs.base';
+import { animateCamera } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// 模型对象、 文字对象
+let model,
+  groutBaseObj: ChamberBase,
+  group,
+  groutType = 'groutBase'; // workerFaceFiber
+const appStore = useAppStore();
+
+// 鼠标点击事件
+const mouseEvent = (event) => {
+  event.stopPropagation();
+  if (!model) return;
+  const widthScale = appStore.getWidthScale;
+  const heightScale = appStore.getHeightScale;
+  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
+  model.mouse.x =
+    ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
+  model.mouse.y =
+    -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
+  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
+  if (group) {
+    if (groutType === 'groutBase') {
+      // groutBaseObj.mousedownModel.call(groutBaseObj, model.rayCaster);
+    }
+
+    // const intersects = model.rayCaster?.intersectObjects([...group.children]) as THREE.Intersection[];
+    // if (intersects.length > 0) {
+    //   if (fiberType === 'beltFiber') {
+    //     beltFiberObj.mousedownModel.call(beltFiberObj, intersects);
+    //   } else if (fiberType === 'workFace') {
+    //     workerFaceFiberObj.mousedownModel.call(workerFaceFiberObj, intersects);
+    //   }
+    // }
+
+    console.log('摄像头，控制器------>', model.camera, model.orbitControls);
+  }
+};
+
+const addMouseEvent = () => {
+  // 定义鼠标点击事件
+  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
+};
+
+const render = () => {
+  if (model.animationId != -1) {
+    model.animationId = requestAnimationFrame(render);
+    model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+    model.stats?.update();
+  }
+};
+
+export const addChamberText = (selectData) => {
+  if (groutType === 'groutBase') {
+    return groutBaseObj.addChamberText.call(groutBaseObj, selectData);
+  }
+};
+
+// 切换模型类型
+export const setModelType = (type) => {
+  groutType = type;
+  return new Promise((resolve) => {
+    if (groutType === 'groutBase') {
+      group = groutBaseObj.group;
+      const oldCameraPosition = { x: 24.736, y: 63.486, z: 103.337 };
+      model.scene.add(groutBaseObj.group);
+      model.camera.position.set(0, 0, 300);
+      setTimeout(async () => {
+        // const position = { x: 0, y: 3.8, z: 10.5 };
+        await animateCamera(
+          oldCameraPosition,
+          oldCameraPosition,
+          { x: -36.224455845316, y: 21.749986776845592, z: -0.10614789855468158 },
+          { x: 0, y: 0, z: 0 },
+          model,
+          0.8
+        );
+      }, 300);
+
+      resolve(null);
+    }
+  });
+};
+
+export const mountedThree = () => {
+  return new Promise(async (resolve) => {
+    model = new UseThree('#grout3D');
+    model.setEnvMap('test1');
+    model.renderer.toneMappingExposure = 1;
+    // model.camera.position.set(100, 0, 1000);
+
+    groutBaseObj = new ChamberBase(model);
+    await groutBaseObj.mountedThree();
+
+    // model.scene.add(groutBaseObj.group);
+
+    addMouseEvent();
+    // render();
+    model.animate();
+    resolve(null);
+  });
+};
+
+export const destroy = () => {
+  if (model) {
+    groutBaseObj.destroy();
+    model.deleteModal();
+    model = null;
+    group = null;
+    groutBaseObj = null;
+  }
+};

src/views/vent/monitorManager/groutMonitor/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="bg"
+    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="grout3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
+      <div>
+        <div ref="elementContent" class="elementContent">
+          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
+          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
+          <p><span class="data-title">故障诊断：</span>
+            <i
+              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
+            ></i>{{selectData.fault}}</p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+  <div class="scene-box">
+    <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注浆系统</customHeader>
+    <div class="center-container">
+      <groutHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' />
+      <div v-else class="history-group">
+        <div class="device-button-group" v-if="deviceList.length > 0">
+          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
+        </div>
+        <div class="history-container">
+          <groutHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+          <groutHandleHistoryVue v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType" />
+          <groutAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
+        </div> 
+      </div>      
+    </div>
+    <BottomMenu @change="changeActive"/>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import customHeader from '/@/views/vent/comment/components/customHeader.vue';
+import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+import { list } from './grout.api';
+import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+import groutHome from './components/groutHome.vue';
+import groutHistory from './components/groutHistory.vue';
+import groutHandleHistoryVue from './components/groutHandleHistory.vue';
+import groutAlarmHistory from './components/groutAlarmHistory.vue';
+
+type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
+const activeKey = ref('monitor');
+const loading = ref(false);
+
+const monitorTable = ref()
+const historyTable = ref()
+const alarmHistoryTable = ref()
+const handlerHistoryTable = ref()
+
+
+//关联设备
+const deviceList = ref<DeviceType[]>([])
+const deviceActive = ref('')
+const deviceType = ref('')
+
+const options = ref()
+// 默认初始是第一行
+const selectRowIndex = ref(0);
+const dataSource = ref([])
+
+const optionValue = ref('')
+
+// 监测数据
+const selectData = reactive({});
+
+function changeActive(activeValue) {
+  activeKey.value = activeValue
+}
+
+function deviceChange(index) {
+  deviceActive.value = deviceType.value = deviceList.value[index].deviceType
+}
+
+// 查询关联设备列表
+async function getDeviceList() {
+  const res = await list({ devicetype: 'sys', systemID: optionValue.value });
+  const result = res.msgTxt;
+  const deviceArr = <DeviceType[]>[]
+  result.forEach(item => {
+    const data = item['datalist'].filter((data: any) => {
+      const readData = data.readData;
+      return Object.assign(data, readData);
+    })
+    if (item.type != 'sys') {
+      deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
+    }
+  })
+  deviceList.value = deviceArr
+  deviceActive.value = deviceArr[0].deviceType
+  deviceChange(0)
+};
+
+async function getSysDataSource () {
+  const res = await list({ devicetype: 'sys_dongshi', pagetype: 'normal' });
+  dataSource.value = res.msgTxt[0].datalist || [];
+  dataSource.value.forEach((data: any) => {
+    const readData = data.readData;
+    data = Object.assign(data, readData);
+  });
+  
+  if(!options.value) {
+    // 初始时选择第一条数据
+    options.value = dataSource.value
+    optionValue.value = dataSource.value[0]['deviceID']
+    Object.assign(selectData,  dataSource.value[0])
+  }
+  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+  return data;
+};
+
+// 切换检测数据
+function getSelectRow(deviceID){
+  const currentData = dataSource.value.find((item: any) => {
+    return item.deviceID == deviceID
+  })
+  if(currentData){
+    optionValue.value = currentData['deviceID']
+    Object.assign(selectData, currentData)
+  }
+}
+
+onBeforeMount(() => {
+
+});
+
+onMounted(async() => {
+  await getSysDataSource()
+  await getDeviceList()
+});
+onUnmounted(() => {
+ 
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+.scene-box{
+  pointer-events: none;
+  .history-group{
+    padding: 0 20px;
+    .history-container{
+      position: relative;
+      background: #6176AF11;
+      width: calc(100% + 10px);
+      top: 0px;
+      left: -10px;
+      border: 1px solid #ffffff22;
+      padding: 10px 0;
+    }
+  }
+  .device-button-group{
+    // margin: 0 20px;
+    display: flex;
+    pointer-events: auto;
+    position: relative;
+    margin-top: 90px;
+    &::after{
+      position:absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid #0efcff;
+    }
+    .device-button{
+      padding: 4px 15px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      
+      color: #fff;
+      cursor: pointer;
+      margin: 0 3px;
+
+      &::before{
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid #6176AF;
+        transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103,85%);
+        z-index: -1;
+      }
+    }
+    .device-active{
+      // color: #0efcff;
+      &::before{
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      }
+    }
+  }
+}
+.center-container{
+  width: 100%;
+  height: calc(100% - 200px);
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
+
+.input-box {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+
+  .input-title {
+    color: #73e8fe;
+    width: auto;
+  }
+
+  .@{ventSpace}-input-number {
+    border-color: #ffffff88 !important;
+  }
+
+  margin-right: 10px;
+}
+</style>

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -164,12 +164,12 @@
         </a-tab-pane> -->
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="fanmain_history" device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" />
+            <HistoryTable columns-type="fanmain" device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm_history" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" />
+            <AlarmHistoryTable columns-type="alarm" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">

src/views/vent/monitorManager/nitrogen/components/bottomMenu.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="bottom-btn-group">
-    <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item" @click="setBtn('click', item)"
-      @mouseenter="setBtn('over', item)" @mouseleave="setBtn('leave', item)">
-      <dv-decoration11
-        :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
-        style="width:200px;height:60px;">
-        {{ item.title }}
-      </dv-decoration11>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { Decoration5, Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'
-
-const router = useRouter()
-const isBtnActive = ref('nitrogen_page_lh')
-const activeColors = ['#009BFF', '#28DBE4']
-const noActiveColors = ['#aaa', '#aaa']
-const navList = ref([
-  {
-    title: '监控界面',
-    pathName: 'nitrogen_page_lh',
-    isHover: true
-  },
-  {
-    title: '关键节点监测',
-    pathName: 'critical_node',
-    isHover: false
-  },
-  {
-    title: '实时曲线',
-    pathName: 'yfj_monitor_echarts',
-    isHover: false
-  },
-  {
-    title: '压风机历史记录',
-    pathName: 'yfj_history',
-    isHover: false
-  },
-  {
-    title: '操作历史记录',
-    pathName: 'yfj_handler_history',
-    isHover: false
-  },
-  {
-    title: '故障诊断历史记录',
-    pathName: 'yfj_faultRecord',
-    isHover: false
-  }
-])
-
-
-function setBtn(type, activeObj) {
-  if (type === 'over') {
-    activeObj.isHover = true
-  } else if (type === 'leave') {
-    activeObj.isHover = false
-  } else if (type === 'click') {
-    isBtnActive.value = activeObj.pathName
-  }
-  // router.push('')
-}
-
-</script>
-<style lang="less" scoped>
-.bottom-btn-group {
-    display: flex;
-    position: fixed;
-    width: calc(100% - 400px);
-    height: 100px;
-    bottom: 20px;
-    align-items: center;
-    justify-content: center;
-
-    .btn-item {
-      width: 200px;
-      height: 60px;
-      margin: 10px;
-      color: #fff;
-      cursor: pointer;
-      pointer-events: auto;
-    }
-  }
-</style>

src/views/vent/monitorManager/nitrogen/components/nitrogenAlarmHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="alarm-history">
-     <AlarmHistoryTable columns-type="alarm_history" device-type="pressurefan" :device-list-api="getTableList.bind(null, { devicekind: 'pressurefan' })" designScope="alarm-history" />
+     <AlarmHistoryTable columns-type="alarm" device-type="pressurefan" :device-list-api="getTableList.bind(null, { devicekind: 'pressurefan' })" designScope="alarm-history" />
   </div>
 </template>
 <script setup lang="ts">

src/views/vent/monitorManager/nitrogen/components/nitrogenHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="nitrogen-history">
-     <HistoryTable columns-type="pressurefan_history" device-type="pressurefan" :device-list-api="getTableList.bind(null, {devicekind :'pressurefan'})" designScope="pressurefan_history" />
+     <HistoryTable columns-type="pressurefan" device-type="pressurefan" :device-list-api="getTableList.bind(null, {devicekind :'pressurefan'})" designScope="pressurefan_history" />
   </div>
 </template>
 <script setup lang="ts">

src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

@@ -121,10 +121,6 @@
                 </div>
               </div>
             </div>
-            <!-- <div class="item" >
-              <assembly-flv ref="video" class="video-box" height="250px"  :url="videoUrl" :destroy="isDestroyVideo" ></assembly-flv>
-            </div> -->
-
           </div>
         </div>
       </div>
@@ -307,7 +303,6 @@ onUnmounted(() => {
       flex-direction: row;
       width: auto;
       margin-bottom: 3px;
-
       .monitor-val {
         color: #ffb700;
         display: flex;